CODEWITHSUNDEEP
javascript
Vijin Paulraj
Vijin Paulraj

Reputation: 4648

select option remove() method on removing multiple options

I'm having a select box which contains 17 values/options. 

<select id="_class" name="_class">
    <option value="0"></option>
    <option value="1">PREKG</option>
    <option value="2">LKG</option>
    <option value="3">UKG</option>
    <option value="4">I</option>
    <option value="5">II</option>
    <option value="6">III</option>
    <option value="7">IV</option>
    <option value="8">V</option>
    <option value="9">VI</option>
    <option value="10">VII</option>
    <option value="11">VIII</option>
    <option value="12">IX</option>
    <option value="13">X</option>
    <option value="14">XI</option>
    <option value="15">XII</option>
    <option value="16">XIII</option>                              
</select>

Now, I'm trying to remove the option from 5 to 8. For that, I'm using the following JavaScript code.

<script type="text/javascript">
 var _class = document.getElementById("_class");
 for(var i=1; i < _class.length;i++) {
   if(i>=5 && i<=8) {
     _class.remove(i);
   }
 }
</script>

But, I'm not getting the expected result, because every time as if the for loop runs, the order of the option is getting changed.

How can I get the desired result?

Here I've attached the Fiddle.

Upvotes: 3

Views: 4115

Answers (4)

Gaurav
Gaurav

Reputation: 859

Hi I faced the same problem. i am pasting my solution. in fubbe answer these is some problem if user is trying to send higher index first and lower index subsequently ..thereby i am aorting the arguments passed to ensure that indexes (received through parameters) are sorted in ascending order first then our loop will be in reverse order to delete the indexes.

HTMLSelectElement.prototype.removeIndexes = removeIndexes;
function removeIndexes(){
  var res = Array.prototype.slice.call(arguments).sort(function(a, b){return     a-b})
  alert(res)
  for (var i=res.length-1;i>=0;i--){
     (function(self,indx){
      self.remove(indx);  
     })(this,res[i])
  }
}
var x = document.getElementById("mySelect");
x.removeIndexes(2,3)

 //------- Another way----------------
 HTMLSelectElement.prototype.removeIndexes = removeIndexes;
 function removeIndexes(){
   var self = this;
   var res = Array.prototype.slice.call(arguments).sort(function(a, b)     {return b-a}).map(function(indx){
   alert(indx)
   self.remove(indx);
 })


 }
 var x = document.getElementById("mySelect");
 x.removeIndexes(2,0,1)

Hope this helps

Kind Regards Gaurav Khurana

Upvotes: 0

user4164128
user4164128

Reputation:

Maybe a bit late, but I had the same issue. Here's my solution. And thanks @steveukx, your explanation helped me out!

function remove(el) {
    for(var i=el.length-1;i>=0;i--) {
        if(el[i].selected)
            el.remove(i);
    }
};

Upvotes: 0

bjelli
bjelli

Reputation: 10090

A simpler example: remove number 2 to 4 of a list of 6: In this list, the digit represents the INDEX in the array:

  • 1) one
  • 2) two
  • 3) three
  • 4) four
  • 5) five
  • 6) six

now if I remove number 2, the rest of the items get a new index:

  • 1) one
  • 2) three
  • 3) four
  • 4) five
  • 5) six

if I remove number 3 next, I actually hit for:

  • 1) one
  • 2) three
  • 3) five
  • 4) six

There's a very simple trick to avoid this: remove in reverse order: in this example (removing 2 to 4) we remove 4 first:

  • 1) one
  • 2) two
  • 3) three
  • 4) four
  • 5) five
  • 6) six

after removing four, only the indexes higher than four changed, and they don't matter to us:

  • 1) one
  • 2) two
  • 3) three
  • 4) five
  • 5) six

now we can remove three:

  • 1) one
  • 2) two
  • 3) five
  • 4) six

In programing terms this means turning the for loop around:

 for(var i=8; i >= 5;i--) {
    _class.remove(i);
 }

See http://jsfiddle.net/bjelline/XQH54/

p.s. as you can see, I also changed the loop to only touch the indexes we really need.

Upvotes: 1

steveukx
steveukx

Reputation: 4368

By iterating through the options incrementally, the indices of the options after an option that is removed will be reduced by one as soon as the option is removed (ie: removing the option at index 5 causes options 6 and above to now be indexed as options 5 and above).

To cater for this, reverse the order of the loop to count downwards:

var _class = document.getElementById("_class");

for(var i=Math.min(_class.options.length, 8); i >= 5; i--) {
  _class.remove(i);
}

http://jsfiddle.net/Gy8j8/2/

Upvotes: 1

Related Questions