根據數據在“選擇選項”上不顯示任何內容

Question

我實際上有多個下拉菜單。 我想要的是，如果我選擇第first下拉菜單，並且我的data-ts是1。我希望我所有具有data-ts 1的下拉選項的樣式屬性都沒有顯示，除了我所顯示的以外已選擇。

到目前為止，這是我所做的：

的HTML

<select class="selection" name="first">
 <option value="1" data-ts="1">1</option>
 <option value="2" data-ts="2">2</option>
</select>

<select class="selection" name="second">
<option value="3" data-ts="1">1</option>
<option value="4" data-ts="2">2</option>
</select>

<select class="selection" name="third">
<option value="5" data-ts="1">1</option>
<option value="6" data-ts="2">2</option>
</select>

JQUERY

$(".selection").on('change', function(){

        var $this = $(this);
        var $selected = $this.find(":selected").data('ts');

        $(".selected").each(function(){
            alert($(this).val());
        });

    });

提前致謝。

Answer 1

嘗試這個

 $(".selection").on('change', function() {

  var $this = $(this);

  var $selected = $this.find(":selected").data('ts');
  console.log($selected);
  var i = 0;
  var array = [];
      $(".selection").each(function() {

            if($this.attr('name')!= $(this).attr('name'))
            {
                if($(this).find("option:selected").attr('data-ts') == $selected)
                {
                       $(this).val('');
                }
            }

            if($(this).find("option:selected").data('ts') != 'undifined' )
            {
                 array[i] = $(this).find("option:selected").data('ts');
                 i = i+1;
            }
      });



     $(".selection").each(function() {
               if($(this).val()=='')
               {
                   $(this).find("option").show();
                   for(j=0;j<array.length;j++)
                   {
                       $(this).find("option[data-ts='" + array[j] + "']").hide();    
                   }

               }


      });



});

JSFiddle鏈接相同

https://jsfiddle.net/0y8L4y1e/5/

Answer 2

嘗試這樣的事情。 您必須檢查data-ts是否等於所選的data-ts，並且要隱藏的選項不是剛剛選擇的選項。

$(".selection").on('change', function () {
    var $this = $(this);
    var $selected = $this.find(":selected");
    var selectedTsData = $selected.data('ts');

    $(".selection option").each(function () {
        $(this).show();
        if ($(this).data('ts') === selectedTsData && $(this) !== $selected) {
            $(this).hide();
        }
    });
});

Answer 3

您可以執行以下操作：

 $(".selection").on('change', function() { $(".selection").each(function() { $(this).find("option").show(); }); var $this = $(this); var $selected = $this.find(":selected").data('ts'); console.log($selected) $(".selection").each(function() { $(this).find("option[data-ts='" + $selected + "']").hide(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="selection" name="first"> <option value="">Select</option> <option value="1" data-ts="1">1</option> <option value="2" data-ts="2">2</option> </select> <select class="selection" name="second"> <option value="">Select</option> <option value="3" data-ts="1">1</option> <option value="4" data-ts="2">2</option> </select> <select class="selection" name="third"> <option value="">Select</option> <option value="5" data-ts="1">1</option> <option value="6" data-ts="2">2</option> </select>