javascript-从另一个选择中选择一个选项时，从多个选择框中隐藏选项

Question

我需要你的帮助。 所以我要做的是，当用户从一个选择中选择一个选项时，自动从另一个选择中隐藏一个选项。

示例：如果用户从select A选择“汽车select A ，我希望select B的汽车选项被自动删除或隐藏。

选择一个：

<select name="my_option_one" required id="id_my_option_one">
    <option value="" selected>Choose..</option>
    <option value="C">Car</option>
    <option value="H">House</option>
    <option value="A">Airplane</option>
</select>

选择B：

<select name="my_option_two"  id="id_my_option_two" multiple="multiple">
    <option value="C">Car</option>
    <option value="H">House</option>
    <option value="A">Airplane</option>
</select>  

这是我尝试过的方法，但均无效果。

$(document).ready(function() {
    $("#id_my_option_one").change(function() {
        if ($(this).val() === 'C') {
            $("#id_my_option_two option[value='C']").options[0].remove();
            $('select[name=my_option_two] option:eq(1)').hide();
            $("#id_my_option_two option[value=" + 'C' + "]").hide();
            $("#id_my_option_two option[value='C']").attr('disabled','disabled').hide(); 
        }
    });
});

Answer 1

 function my_optionsChange() { $("#id_my_options_two option").show(); //.css("display", "block"); $("#id_my_options_two option[value='" + $("#id_my_options").val() + "']").hide(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <select name="my_options" required id="id_my_options" onchange="my_optionsChange()"> <option value="" selected>Choose..</option> <option value="C">Car</option> <option value="H">House</option> <option value="A">Airplane</option> </select> <select name="my_options_two" id="id_my_options_two" multiple="multiple"> <option value="C">Car</option> <option value="H">House</option> <option value="A">Airplane</option> </select> 

Answer 2

我做了一个更长的示例，因为它分为多个部分，因此您可以更好地了解正在发生的事情。

我试图命名变量，以便清楚地知道它们是什么，但是如果您有任何疑问，请在评论中提问。

让我知道这是否适合您。

 const firstSelect = $('#id_my_options') const secondSelect = $('#id_my_options_two') firstSelect.on('change',function() { const selected = $(this).find('option:selected'); const selectedValue = selected.val() const secondOptions = secondSelect.children(); secondOptions.each(function() { const secondValue = $(this).val() secondValue === selectedValue ? $(this).hide() : $(this).show() }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="my_options" required id="id_my_options"> <option value="Choose" selected>Choose..</option> <option value="C">Car</option> <option value="H">House</option> <option value="A">Airplane</option> </select> <select name="my_options_two" id="id_my_options_two" multiple="multiple"> <option value="C">Car</option> <option value="H">House</option> <option value="A">Airplane</option> </select> 

Answer 3

<select name="my_options"  id="firstblock" onchange="disable(2,this.value);">
    <option value="" selected>Choose..</option>
    <option value="C">Car</option>
    <option value="H">House</option>
    <option value="A">Airplane</option>
</select>
<select name="my_options"  id="secondblock" onchange="disable(1,this.value);">
    <option value="" selected>Choose..</option>
    <option value="C">Car</option>
    <option value="H">House</option>
    <option value="A">Airplane</option>
</select>

<script>

   function disable(needtoblock,val){
   console.log(needtoblock+" "+val);
    if(val != ""){

        if(needtoblock == 1){
         $("#firstblock option[value='"+val+"']").prop('disabled', true);
        }else if(needtoblock == 2){
         $("#secondblock option[value='"+val+"']").prop('disabled', true);
        }else{

        }
    }else{
             $("#secondblock option").prop('disabled', false);
             $("#firstblock option").prop('disabled', false);
    }
   }
</script>

这就是代码的外观，明确地，您需要更新并使其适合您。

Answer 4

我知道，这有点晚了，但也许有人对它感兴趣。 我了解OP的需求，因此选项的隐藏应朝任何方向进行 ，或者可能跨越多个选择器框 。 以下脚本将完全做到这一点：如果在一个选择器中选择一个选项 ，它将通过已定义组$grp的其他选择器（通过执行$grp.not(this).each((i,trg)=> ...) ），并会在其中隐藏/显示所有选项 ，具体取决于是否已经在其他位置选择了thay。

的$(to).toggle(...)方法设置每一个选项的可见性（ to ）内trg ，基于与在的同胞选择相同的值选择的选项的存在trg （再次，仅限于当前组$grp ）。

脚本可能过于紧凑 ，难以阅读，但它显示了使用jQuery的强大功能，只需很少的代码就可以实现很多目标。

 const $grp=$('select[id^=id_my_options]') // define the selector group $grp.on('change',function(ev){ // bind the change event ... $grp.not(this).each((i,trg)=> // work on each sibling-selector (trg) of clicked // selector (this), but only within jquery // selection $grp $('option[value!=""]',trg).each((j,to)=> // for all options of sibling-selectors of // trg (within jquery selection $grp): $(to).toggle($grp.not(trg).find('option[value='+to.value+']:selected').length==0)) // toggle the visibiltiy of that option ) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="my_options" required id="id_my_options"> <option value="" selected>Choose..</option> <option value="C">Car</option> <option value="H">House</option> <option value="A">Airplane</option> </select> <select name="my_options_two" id="id_my_options_two" multiple="multiple"> <option value="C">Car2</option> <option value="H">House2</option> <option value="A">Airplane2</option> </select> <select name="my_options_three" id="id_my_options_three" multiple="multiple"> <option value="O">yet another option</option> <option value="C">Car3</option> <option value="H">House3</option> <option value="A">Airplane3</option> </select> <br><br> <select name="my_options_four" id="id_your_options_four" multiple="multiple"> <option value="O">and some unrelated options</option> <option value="C">Car3</option> <option value="H">House3</option> <option value="A">Airplane3</option> </select>