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

Array of select field with same name and different id.

本文关键字：id 选择 字段 数组      更新时间：2023-09-26

我有一个选择字段数组，所有字段都具有相同的选项值列表。我试图得到的是，如果在任何一个字段中选择一个值，它不应该显示在另一个字段中。下面是一个示例代码。例如，如果我有四个选择字段，如果我在第一个字段上选择"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>

试试我写的这段代码。希望应该有所帮助

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

由于您不想销毁数据，因此需要隐藏选项。这很棘手，因为您需要组合多个状态。

你可以进行几个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。

如果你有带空格的值，你将需要比类更漂亮的CSS选择器，比如data-state="|a b|hello world|honda crv|"属性，你可以用部分属性选择器（body[data-state*='|hello world|']...）来分隔和命中，但同样的模式可以处理许多更复杂的状态。

小提琴 

 $(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();
      })
    })
    })
相关文章：