我想要做到的是,如果您在下拉列表中选择除“条件”之外的某些内容,它将搜索所有元素并显示它们。
我的jquery:
$('#searchbtn').click(function(){
var e = document.getElementById("condition");
var strUser = e.options[e.selectedIndex].value;
$('.item').each(function(){
var itemcondition = $('.condition').html();
if (itemcondition === strUser.toLowerCase()){
$(this).show();
}
if (itemcondition !== strUser.toLowerCase()){
$(this).hide();
}
});
})
我的html:
<select id="condition">
<option>Condition</option>
<option value="factory new">Factory New</option>
<option value="minimal wear">Minimal Wear</option>
<option value="field tested">Field Tested</option>
<option value="well worn">Well Worn</option>
<option value="battle scarred">Battle Scarred</option>
</select>
这是元素的样子:
<div class="item" data-keywords="m4a4 howl">
<div class="name">M4A4 Howl</div>
<div class="condition">Factory New</div>
<div class="price">800 000 coins</div>
<button>Buy</button>
</div>
最佳答案
以下是修复该问题的方法。 您的 html 属性和 javascript 代码应该更改。您应该为选项值提供产品状况的 ID/slug - 它不应该有空间,因为我们将在下一步中更轻松地管理这些数据。
<select id="condition">
<option>Condition</option>
<option value="factory-new">Factory New</option>
<option value="minimal-wear">Minimal Wear</option>
<option value="field-tested">Field Tested</option>
<option value="well-worn">Well Worn</option>
<option value="battle-scarred">Battle Scarred</option>
</select>
您的产品列表应该与您选择的选项值相对应,如下所示。
<div class="item factory-new field-tested" data-keywords="m4a4 howl">
<div class="name">M4A4 Howl</div>
<div class="condition">Factory New</div>
<div class="price">800 000 coins</div>
<button>Buy</button>
</div>
你的 javascript 应该几乎完全改变。更容易理解。
$('#searchbtn').click(function() {
var $condition = $("#condition");
var condition = $condition.val();
$('.item').hide();
$('.item.' + condition).show();
})
希望有帮助。
关于javascript - JQuery 使用下拉列表搜索元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39437108/