Question

我有li列表，每个列表都有数据名和数据体我想显示与所选值匹配的唯一li 首先选择是选择车名第二个选择是选择车身

<ul id="shop">
    <li><a href="#" data-name="audi" data-body="cedan"><img src="images/1.jpg">audi-cedan</a></li>
    <li><a href="#" data-name="bmw" data-body="cedan"><img src="images/1.jpg">bmw-cedan</a></li>
    <li><a href="#" data-name="audi" data-body="suv"><img src="images/1.jpg">audi-suv</a></li>
    <li><a href="#" data-name="bmw" data-body="suv"><img src="images/1.jpg">bmw-suv</a></li>
</ul>
<select id="select-name">
    <option value="">select</option>
    <option value="audi">audi</option>
    <option value="bmw">bmw</option>
</select>
<select id="select-body">
    <option value="">select</option>
    <option value="cedan">cedan</option>
    <option value="suv">suv</option>
</select>

这是我尝试的，当我选择第一个它的工作，但当我选择第二个与它它不能正常工作

$('#select-name').change(function() {
    $("li a").hide();
    var selected = $('#select-name option:selected').attr("value");
    $("li a").each(function() {
        if ( $(this).attr("data-name") === selected ){
            $(this).show()
        }
    }); 
});

$('#select-body').change(function() {
    $("li a").hide();
    var selected = $('#select-body option:selected').attr("value");
    $("li a").each(function() {
        if ( $(this).attr("data-body") === selected ){
            $(this).show()
        }
    }); 
});

Answer 1

当你说它不起作用时，我假设这意味着如果用户已选择＆＃34; audi＆＃34;在第一个选择中，然后选择＆＃34; suv＆＃34;在第二种情况下，你希望显示器是＆＃34; audi suv＆＃34;，但目前显示＆＃34; audi suv＆＃34;和＆＃34; bmw suv＆＃34;。如果是这种情况，您需要更改功能以提防其他选择。例如：

$('#select-body').change(function() {
    $("li a").hide();
      var selectedName = $('#select-name option:selected').attr("value");
    var selected = $('#select-body option:selected').attr("value");
    $("li a").each(function() {
        if ( $(this).attr("data-body") == selected && $(this).attr("data-name") ==selectedName){
            $(this).show()
        }
    }); 
});

Answer 2

我可以从Christoph的答案中改进代码：

$('#select-body').change(function() {
    var selected = $('#select-body option:selected').attr("value");
    $("li a[data-body='" + selected + "']").hide(); 
});

...但是如果用户选择第一个选项（带有空值），此代码将显示所有链接。因此，最好将逻辑反转以显示您想要的内容：

$('#select-body').change(function() {
    var selected = $('#select-body option:selected').attr("value");
    $("li a").hide();         
    $("li a[data-body='" + selected + "']").show(); 
});

Answer 3

我们需要做的是同时考虑selects，因为我认为Audi SUV只应显示是否选择了audi和suv？

看看这个：

// look at selects when they change
$('select').change(function() {
    var selectedName = $('#select-name option:selected').val();
    var selectedBody = $('#select-body option:selected').val();
    if(!selectedName && !selectedBody){ // nothing selected - reset and get out
        $("li").show();
      return false;
    }
    $("li").hide();
    $("li a").each(function() {
        // no name, just find body
        if(!selectedName){
            $("li a").each(function() {
            $(this).attr("data-body") === selectedBody ? $(this).parent().show() : '';
            })
          // no body just find name
          } else if(!selectedBody){
            $("li a").each(function() {
            $(this).attr("data-name") === selectedName ? $(this).parent().show() : '';
            })
          // else match and find both
          } else if ( (selectedName && $(this).attr("data-name") === selectedName) 
                    && (selectedBody && $(this).attr("data-body") === selectedBody )){
            $(this).parent().show()
        }
    }); 
});

Here's a fiddle to see it in action

Answer 4

所以，现在我得到了你想要的东西：

我对两个下拉列表都使用了相同的逻辑，因为我假设您要按两者进行过滤：

$('#select-name, #select-body').change(function() {
  var selectedName = $('#select-name option:selected').attr("value");
  var criteriaName = selectedName !== "" ? "[data-name='" + selectedName + "']" : "";
  var selectedBody = $('#select-body option:selected').attr("value");
  var criteriaBody = selectedBody !== "" ? "[data-body='" + selectedBody + "']" : "";
  $("li a").hide();
  $("li a"+criteriaName+criteriaBody).show();
});

看看羽毛球：https://plnkr.co/edit/TXFtJRHTxGZo3QwQ8uNY

使用2个选择列表过滤元素

4 个答案: