Question

我有一个包含两个相同select列表的表单，如下所示：

<select id="system" name="system[1][1]">
  Option 1
  Option 2
  Option 3
</select>

<select id="system" name="system[1][2]">
  Option 1
  Option 2
  Option 3
</select>

我希望用户选择其中一个选择option2。如果用户在option2中选择first select，则隐藏option2中的second select，反之亦然。

实施例

var select1 = document.querySelector('[name="system[1][1]"]');
var select2 = document.querySelector('[name="system[1][2]"]');

if (select1.value == '2') {
  $('select[name="system[1][2]"] option[value="2"]').hide();
  $('select[name="system[1][1]"] option[value="2"]').show();
} else if (select2.value == '2') {
  $('select[name="system[1][2]"] option[value="2"]').show();
  $('select[name="system[1][1]"] option[value="2"]').hide();
}

我认为这有点混乱。我可以在Javascript或Jquery中实现这一目标吗？

由于

Answer 1

请尝试以下代码：

<select id="system" name="system[1][1]">
    <option value="optioin-1">Option 1</option>
    <option value="option-2">Option 2</option>
</select>

<select id="system" name="system[1][2]">
    <option value="optioin-1">Option 1</option>
    <option value="option-2">Option 2</option>
</select>

jQuery：

jQuery('select').change(function(e){
    var value = $(this).val();
    var selectboxId = $(this).attr('name');
    jQuery('select option').show();
    if(selectboxId == 'system[1][1]') {
        jQuery('select[name="system[1][2]"]').find('option[value="'+value+'"]').hide();
    } else if(selectboxId == 'system[1][2]') {
        jQuery('select[name="system[1][1]"]').find('option[value="'+value+'"]').hide();
    }
});

Answer 2

试试这个Check out this fiddle

我希望这是你在找什么？

<强> HTML

<select id="system1" name="system[1][1]">
 <option value="1">1</option>
 <option value="2">2</option>
</select>

<select id="system2" name="system[1][2]">
 <option value="1">1</option>
 <option value="2">2</option>
</select>

<强> Jquery的

$(document).ready(function(){
$('select').change(function(){

var select1 = document.querySelector('[name="system[1][1]"]');
var select2 = document.querySelector('[name="system[1][2]"]');

if (select1.value == '2') {
  $('select[name="system[1][2]"] option[value="2"]').hide();
  $('select[name="system[1][1]"] option[value="2"]').show();
} else if (select2.value == '2') {
  $('select[name="system[1][2]"] option[value="2"]').show();
  $('select[name="system[1][1]"] option[value="2"]').hide();
} else if (select1.value == '1') {
  $('select[name="system[1][2]"] option[value="2"]').show();
  $('select[name="system[1][1]"] option[value="2"]').hide();
} else if (select2.value == '1') {
  $('select[name="system[1][2]"] option[value="2"]').show();
  $('select[name="system[1][1]"] option[value="2"]').hide();
}

});
});

Answer 3

我建议使用以下方法（请注意id属性的更改，这不是可选的，为了获得有效的HTML，它是必需的）：

＆＃13;

// cache the relevant <select> elements, here we use
// a CSS attribute-selector to get those <select>
// elements whose id attribute begins with 'system':
var selectElements = $('select[id^=system]');

// binding the anonymous function as the event-handler
// for the 'change' event, using the on() method:
selectElements.on('change', function() {

  // we retrieve the index of the selected option from
  // the changed <select> element:
  var chosen = this.selectedIndex;

  // we hide all the previously-selected <select> elements:
  selectElements.hide()
    // we find the <select> element at the same index as
    // the chosen <option>:
    .eq(chosen)
    // and then show that element:
    .show();
})

＆＃13;

/* This is just to give a visual cue to
   show which of the elements is currently
   visible on the page: */
#system1 {
  box-shadow: 0 0 1em fuchsia;
}
#system2 {
  box-shadow: 0 0 1em limegreen;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="system1" name="system[1][1]">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select id="system2" name="system[1][2]">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

＆＃13;

JS Fiddle demo

参考文献：

CSS：
- Attribute selectors。
JavaScript的：
- HTMLSelectElement.selectedIndex。
jQuery的：
- on()。

Answer 4

虽然有一些答案，但这就是我想出的：

$("select").on("change", function() { //on any change event in all selects
  var currentSelection = $(this); //save the used select box 

  //then take all selects, except the activated one, take the 'option' childs and iterate through them
  $("select").not(currentSelection).find("option").each(function() { 
        if ($(this).val() == currentSelection.val()) //if option value = chosen value
        $(this).hide();   //hide it
      else                //if not
        $(this).show();   //show it (to reshow already hidden elements) 
    });
  });

这适用于无穷无尽的选择！但是很快，因为你有超过2个选择，你必须重做这个脚本的'show'部分......

这是一个工作小提琴：https://jsfiddle.net/usksL955/1/

在javascript中按选定值隐藏其中一个选项？

实施例

4 个答案: