javascript - 如果使用 javascript/jquery 存在于第二个列表中，则从第一个选项列表中删除

Question

我有两个选项列表

第一个列表

• 0x穆罕默德
• 啊啊啊啊啊

• 测试

             <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>
  

<小时/>

我想检查第二个列表中是否存在值，如果存在，则将其从第一个列表中删除

我尝试过这个功能

     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);

                }}

但是，它适用于列表中的一个项目，但不适用于两个或多个项目，它从第一个列表中删除不同的选项，我认为这是因为当第二个循环后删除一个项目时，第一个列表中的项目将具有不同的选项索引...也许不确定

希望有人能帮忙

Answer 1

使用过滤功能的Jquery解决方案:

$('#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>