1 
<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 しかありません。

どうすれば作れますか？jQueryを使用したいと思います。

ライブ: http://jsfiddle.net/9N9Tz/1/

4

4 に答える 4

5

何かを並べ替える必要がある場合は、jQuery UI sortableのようなものを使用することを検討してください。ドロップダウン メニューがたくさんあると、そのための UX が非常に貧弱になります。

しかし、あなたの質問に答えるには：

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 で機能します。レガシーブラウザについてはわかりません。要素を非表示にしますが、削除するのではなく、入力要素を無効にすることなく選択を変更できるようにします。

于 2012-06-17T13:31:47.377 に答える
3

ここに行きますhttp://jsfiddle.net/Calou/9N9Tz/6/。

s の値が変更された場合は、この値を取得して、他の s でこの値を持つ s を<select>検索し、それらを削除します。<option><select>

$(".one").change(function(){
    var val = this.value
    if (val !== '') {
        $(this).siblings().find('option[value=' + val + ']').remove()
    }
})
于 2012-06-17T13:32:54.193 に答える
1 
// As soon as all selects have one class, you'll have to distinguish them:
$(".one").each(function() { 
    // Now this corresponds to one select (in the loop over all)
    $(this).change(function() {
       // Fix what've done before
       $('option').show();
       // Find every other select, find an option in it
       // that has the same value that is selected in current select
       // (sorry for the description)
       $('.one').not(this).find('option[value=' + $(this).find('option:selected').val() +']').hide();
    });
})​;​

jsFiddle

于 2012-06-17T13:34:20.683 に答える
1

2番目と3番目の選択要素に別のクラスを使用すると簡単です

$(".one").change(function(){
    var val = parseInt($(this).val());
    $('.two,.three').find('option:contains('+val+')').remove();  
});

編集:
複数の選択に適用するようにコードを更新しました。[すべてのコメンテーターとアレックスに気づかせてくれてありがとう]

  $(".one").change(function(){
        var val = parseInt($(this).val());
        $(this).siblings().find('option:contains('+val+')').remove();  
    });
于 2012-06-17T13:29:48.603 に答える