Question

我有一系列选择字段都具有相同的选项值列表。我想要得到的是，如果在任何一个字段中选择了一个值，它就不应该在另一个字段中显示。下面是一个示例代码。例如，如果我有四个选择字段，如果我在第一个字段上选择“a”，则值“a”不应出现在下一个选择字段中。与“b”，“c”和“d”的其他值相同。我正在尝试使用java脚本。我正在学习阶段。帮助将非常感激。谢谢

<select name='list' id='list_1'>
    <option value='a'>a</option>
    <option value='b'>b</option>
    <option value='c'>c</option>
    <option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>

</select>
<select name='list' id='list_3'>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='d'>d</option>
</select>

Answer 1

由于您不想销毁数据，因此需要隐藏选项。这很棘手，因为你有多个州要结合。

你可以进行几次IF比较，为每个组和选项（yuck）硬编码组合表，或者用一大堆JS来解决这个问题，但我认为CSS更好。

实现此目的的一种简单方法是使用CSS;单个元素上的多个类，可将您的多个状态转换为可立即和一般应用的规则（无需使用硬编码ID或名称）。

<select name='list' id='list_1'>
    <option value='a'>a</option>        <option value='b'>b</option>
    <option value='c'>c</option>        <option value='d'>d</option>
</select>
<select name='list' id='list_2'>
    <option value='a'>a</option>        <option value='b'>b</option>
    <option value='c'>c</option>        <option value='d'>d</option>
</select>
<select name='list' id='list_3'>
    <option value='a'>a</option>        <option value='b'>b</option>
    <option value='c'>c</option>        <option value='d'>d</option>
</select>
<select name='list' id='list_4'>
    <option value='a'>a</option>        <option value='b'>b</option>
    <option value='c'>c</option>        <option value='d'>d</option>
</select>


<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>  
<script>

var combos=[], // store the css we need to define hide/show rules
    classes= new Array($("select").length); //a place to store many states

$("select").each(function(i,e){ // for every drop down,      
   $(this).change(function(){ // when it changes:
    classes[i]=this.value; // update array with changed value in right slot
    document.body.className=classes.join(" "); // update body class with array
   });

});

$("select option[value]").each(function(n, a){ // make css to hide each option if body has the same class:
  combos.push( "body."+a.value+" option[value='"+a.value+"'] ");
});

//append the dynamic CSS to the head:  
$("head").append("<style> "+combos+"{ display: none; }</style>");  

</script>

在线演示：http://pagedemos.com/pe2uf5vkx9vh/

如果您想将此功能限制为某些下拉菜单，请在上面的代码中为其提供类似<select class=hider的类，并将$("select更改为$("select.hider。

Answer 2

试试我写的代码..希望应该帮助

<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>
<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>
<select>
  <option value="0"> </option>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

$(document).on('change', 'select', function() {
   $(this).find('option:selected').addClass('keepit');
   $('option[value="' + this.value + '"]:not( .keepit)').remove();
});

https://jsfiddle.net/av46dbo1/

Answer 3

Fiddle

 $(function(){
      $('#list_1').change(function(){
      var valueToRemove=$(this).val();

      $('select').not('#list_1').each(function(){
      var currentId=$(this).prop('id');
      $("#"+currentId+" option[value="+valueToRemove+"]").remove();
      })
    })
    })

具有相同名称和不同ID的选择字段的数组。

3 个答案: