JasonDavis JasonDavis - 6 months ago 9
Javascript Question

Remove more than 1 select option using JavaScript

I have 3 columns of HTML selection fields which need to load otions dependent on the previous selection fields.

Selection in column 2 values will be dependant on selected value in column 1 selection. I have this raw JavaScript below which add 2 selection options to a an HTML select filed and then removes 2 based on the select value in selection 1.

My problem is that the part that removes the 2 selection field options is not removing both options but instead removes 1 of them.

Demo: http://jsfiddle.net/jasondavis/croh2nj8/3/

I realize some of this uses jQuery but the goal is to use raw JS without jQuery for this part in question....

$(document).ready(function() {

$("#action").change(function() {

var el = $(this) ;
var selectAttributeEl = document.getElementById('action-attribute');

if(el.val() === "form" ) {
var option = document.createElement('option');
option.text = 'Name';
var option2 = document.createElement('option');
option2.text = 'ActionURL';
selectAttributeEl.add(option);
selectAttributeEl.add(option2);

}else if(el.val() === "link" ) {
for (var i=0; i<selectAttributeEl.length; i++){
if (selectAttributeEl.options[i].value == 'Name'){
selectAttributeEl.remove(i);
}else if(selectAttributeEl.options[i].value == 'ActionURL'){
selectAttributeEl.remove(i);
}
}
}
});

});

Answer

As I stated, you're getting the issue, very simply, because the for loop is started from index 0 and working your way up. When you remove an element, you remove it from the NodeList of options. Easiest way I know of is to start from the end of the node list and work your way to node number 0.

$(document).ready(function() {

  $("#action").change(function() {

    var el = $(this);

    if (el.val() === "form") {
      //$("#action-attribute").append('   <option value="Name">Name</option>');
      //$("#action-attribute").append('   <option value="ActionURL">ActionURL</option>');
      var x = document.getElementById('action-attribute');
      var option = document.createElement('option');
      option.text = 'Name';
      var option2 = document.createElement('option');
      option2.text = 'ActionURL';
      x.add(option);
      x.add(option2);

    } else if (el.val() === "link") {
      //$("#action-attribute option:last-child").remove() ; 
      var selectobject = document.getElementById("action-attribute");
      var remove_array = ['Name', 'ActionURL'];
      for (var i = selectobject.options.length - 1; i >= 0; i--) {
        if (remove_array.indexOf(selectobject.options[i].value) != -1) {
          selectobject.removeChild(selectobject.options[i]);
        }
      }
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
When :
<select id="action" name="action">
  <option value="link">Link Clicked</option>
  <option value="form">Form Submitted</option>
</select>

with:

<select id="action-attribute" name="action-attribute">
  <option>ID</option>
  <option>Class</option>
</select>

Comments