Day: January 26, 2018

How to add and remove attribute with jquery?

If you want to add and remove attribute using jquery then you can check this code. It will remove id and then when click remove then this id will remove. I also add css for understanding it.

This is html and css code


<div id="page_navigation1" style="border: 2px solid #ccc;height: 70px;width: 300px">Main Content</div>
<button id="add">Add</button>
<button id="remove">Remove</button>

This is css code

<style>
    #page_navigation1 {
        color: red;
    }
</style>

This is jQuery code which add and remove attribute

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#page_navigation1").addClass("page_navigation");

        $("#add").click(function(){
            $(".page_navigation").attr("id","page_navigation1");
        });
        $("#remove").click(function(){
            $(".page_navigation").removeAttr("id");
        });
    });
</script>

When run this code you will see this effect, If you find any problem then please inform me.

Comment

make two dropdown values from an array using JavaScript and jQuery.

If you want to make two select dropdown using javascript array then you can use this code which help you.

This is html code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectNumber">
	<option>Choose a number1</option>
</select>
<select id="selectNumber2">
	<option>Choose a number2</option>
</select>

this is jQuery code

<script> 
var options = ["1", "2", "3", "4", "5"];

    $.each(options, function(key, value) {
        $('#selectNumber,#selectNumber2').append($("<option/>", {
            value: key,
            text: value
        }));
    });

</script>

There is other option

<script>
        var select = document.getElementById("selectNumber");
        var select2 = document.getElementById("selectNumber2");
        var options = ["1", "2", "3", "4", "5"];
        for (var i = 0; i < options.length; i++) {
            var opt = options[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            select.appendChild(el);
            select2.appendChild(el.cloneNode(true));
        }
    });
</script>

This is other option if you want separate the option code

<script>
    var select = document.getElementById("selectNumber");
    var select2 = document.getElementById("selectNumber2");
    var options = ["1", "2", "3", "4", "5"];
    for (var i = 0; i < options.length; i++) {
        var opt = options[i];

        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);

        var e2 = document.createElement("option");
        e2.textContent = opt;
        e2.value = opt;
        select2.appendChild(e2);
    }
</script>

If you find any problem or face any problem then please inform me.

Comment