Question

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

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

选择A：

<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(...)方法根据{{1}的兄弟选择器中具有相同值的所选选项的存在，设置to中每个选项（trg）的可见性。 }（同样，仅限于当前的trg组）。

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

$grp

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

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

4 个答案: