选择中的删除选项 [英] Remove option in select

问题描述

<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<br />
<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<br />
<select class="one">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

$(".one").change(function(){

})

我想制作-例如，如果我选择第一个位置选项1，那么我其他人选择此选项，则应删除该选项. 因此，如果我在第一选择中选择了1，那么在选择第二和第三选择中，我只有选项2和3.如果在第二选择中选择了2，那么在最后选择中，我只有选项3.

I would like make - for example if i select in first position option 1 then i others selects this option should be removed. So if i in first select i select 1 then in select second and third i have only option 2 and 3. If in second select i select 2 then in last select i have only option 3.

我该怎么做?我想使用jQuery.

How can i make it? I would like use jQuery.

LIVE: http://jsfiddle.net/9N9Tz/1/

推荐答案

如果需要排序，请考虑使用

If you need to sort something, consider using something like jQuery UI sortable as a bunch of drop down menus make a really poor UX for that.

但要回答您的问题:

var $selects = $('.one');
$selects.on("keyup click change", function(e) {
  $selects.not(this).trigger('updateselection');
}).on("updateselection", function(e, data) {
  var $this = $(this);
  $this.children().show();
  $selects.not(this).each(function() {
    var value = $(this).val();
    if (value) {
      $this.children('[value="' + value + '"]').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="one">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br />
<select class="one">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<br />
<select class="one">
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

隐藏选项适用于当前的Firefox.我不确定旧版浏览器.隐藏但不删除该元素，以确保您可以更改选择而不会削弱输入元素.

Hiding an option works in current firefox. I'm not sure about legacy browser. Hiding, but not removing, the element makes sure that you can change your selection without having crippled your input elements.

这篇关于选择中的删除选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！