根據數據在選擇選項上顯示無

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是否等於所選數據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>