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>

根据数据在选择选项上显示无

3 个答案: