Question

是否可以将变量添加到伪元素的jquery字符串选择器？我已尝试过以下两个代码，但没有一个代码可以使用，请问你能帮我吗？

 $(function () {
        $("option").click(function(){
        var filt1 = $(this).attr('id');
     $('#filter2 option[class!='+ filt1+ ']').hide();
      $('#filter2 option[id*='+ filt1+']').show();
    });
    });

和

{{1}}

Answer 1

<option>跨浏览器不支持事件和隐藏！根据第一个选择

中的值删除和追加

首先存储并删除＃filter2中的<option>。

更改为使用filter1中的选项值并使用<select>的更改事件。

然后，当进行更改时...克隆并过滤存储的<option>并将过滤后的内容仅放入＃filter2

var $filter2 = $('#filter2'),
  // store options for #filter2
  $filter2Opts = $filter2.children().detach();

$('#filter1').change(function() {    
  var $newOpts = $filter2Opts.clone().filter('.' + $(this).val())
  $filter2.html($newOpts);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple size="2" id="filter1">
  <option value="opt1">I'm option 1</option>
  <option value="opt2"> I'm option 2</option>
</select>

<select multiple size="4" id="filter2">
  <option class="opt1"> I'm option 1 sub-option A</option>
  <option class="opt1"> I'm option 1 sub-option B</option>
  <option class="opt2"> I'm option 2 sub-option A</option>
  <option class="opt2"> I'm option 2 sub-option B</option>
</select>

Answer 2

您的第二次尝试已经结束，您只是缺少属性值周围的引号：

$(function () {
   $("option").click(function(){
      var filt1 = $(this).attr('id');
      $('#filter2 option[class!="'+ filt1+ '"]').hide();
      $('#filter2 option[id*="'+ filt1+'"]').show();
   });
});

但如果我明白你要做的正确，你可能会想要这个：

$(function () {
    $("option").click(function(){
        var filt1 = $(this).attr('id');     
        $('#filter2 option').hide();
        $('#filter2 option.'+ filt1).show();
    });
});

但正如charlietfl所说，通过CSS隐藏选项并不是跨浏览器兼容的，所以你可能想按照他们说的那样去做。

如何将变量添加到伪类的jquery选择器？

2 个答案: