Remove from first option list if it exsite in the second list using javascript/jquery

user_11845248 0
Viewed 44

i have two options lists

First list

  • 0xmohamed
  • aaaaaaaaaaa

  • test

               <select id="0" multiple="" size="6">
           <option value="0xmohamed">0xmohamed</option>
           <option value="aaaaaaaaaaa">aaaaaaaaaaa</option>
           <option value="test">test</option></select>

Second list

  • aaaaaaaaaaa

  • test

               <select id="5" name="ary[]" multiple="" size="6">              
           <option value="aaaaaaaaaaa">aaaaaaaaaaa</option>
           <option value="test">test</option>  </select>

I want to check if value existe in the second list, if yes, remove it from the first list

I tried with this function

     var e = document.getElementById('0');
            var f = document.getElementById('5');
            var output = [];
            for(var a= e.options.length-1; a >= 0; a--) {
            output.push(e.options[a].value);

            }
console.log(output);
            for(var b= f.options.length-1; b >= 0; b--) {
            if (output.includes(f.options[b].value)){
                var i=output.indexOf(f.options[b].value);
                console.log(i);

                e.remove(i);

                }}

but, it work with one item in the list but not two or more, it remove different option from the first list and i think that's because when an item removed then after second loop, the items in the first list will have different indexes...maybe not sure

Hope someone can help

jquery javascript
3 Answers

i get it work, i changed the first loop to 

for(var a=0; a <= e.options.length-1; a++)

so, the array get filled ascend way, and it worked

user_118452480

Jquery solution using filter function:

$('#0 option').filter(function(){
       return $('#5 option[value='+this.value+']').length > 0
}).remove();


$('#0 option').filter(function(){
       return $('#5 option[value='+this.value+']').length > 0
}).remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="0" multiple="" size="6">
           <option value="0xmohamed">0xmohamed</option>
           <option value="aaaaaaaaaaa">aaaaaaaaaaa</option>
           <option value="test">test</option></select>
           
           <select id="5" name="ary[]" multiple="" size="6">              
           <option value="aaaaaaaaaaa">aaaaaaaaaaa</option>
           <option value="test">test</option>  </select>

user_17197520

Please check function removeOptionIfExits. I have added explanation in comment lines in the code.

// Remove options from first select which already exist in second select.
function removeOptionIfExits() {
  // retrieve values from the second select
  var values = $("#5 option").toArray().map(x => x.value);
  
  // find all options from first select.
  // filter those options which has value exist in second select
  // loop through it and remove.
  $("#0 option").toArray()
        .filter(x => values.includes(x.value))
        .forEach(x => x.remove());
}

// Call remove function after document ready.
$(document).ready(function(){
  removeOptionIfExits();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<select id="0" multiple="" size="6">
  <option value="0xmohamed">0xmohamed</option>
  <option value="aaaaaaaaaaa">aaaaaaaaaaa</option>
  <option value="test">test</option>
</select>


<select id="5" name="ary[]" multiple="" size="6">
  <option value="aaaaaaaaaaa">aaaaaaaaaaa</option>
  <option value="test">test</option>
</select>

user_96952860
Related