Question

I have a list of check-boxes and a drop-down list.I managed to add elements dynamically to dropdown list when I check the checkboxes.

How can I remove corresponding Items dynamically from drop-down list when I un-check particular checkbox.

Here is my code

//<input type="checkbox" name="docCkBox" value="${document.documentName}" onclick="handleChange(this)"/>
// check box onclick event will call this function
   function handleChange(cb) {
         if (cb.checked)
    {

        // Create an Option object
        var opt = document.createElement("option");

        // Add an Option object to Drop Down/List Box
        document.getElementById("query_doc").options.add(opt);

        // Assign text and value to Option object
        opt.text = cb.value;
        opt.value = cb.value;


    }

    else{


//I want to remove a particuler Item when I uncheck the check-box
//by below method it will always remove the first element of the dropdown but not the corresponding element

 var opt = document.createElement("option");
 opt.text = cb.value;
 opt.value = cb.value;
 document.getElementById("query_doc").remove(opt);

 }


    }

Answer 1

You need to get access to the option that is already in the select tag, not create a new one. I would do this by getting all of the options then checking each one to see if it has the value of the checkbox. The code would look something like this inside the else block:

var opts = document.getElementById("query_doc").getElementsByTagName('option');
for(var i = 0; i < opts.length; i++){
    if(opts[i].value == cb.value){
        opts[i].parentNode.removeChild(opts[i]);
    }
}

I haven’t tested the code, but the general idea is there.