我正在使用jquery的数据属性来从下拉列表中搜索值。以下是我在这里做的事情..
$(document).ready(function() {
// Default selected as blank value
$('#search_by_brand').prop('selectedIndex', "");
// Our work page - Search by Brand
$('#search_by_brand').change(function() {
$('#search_by_channel').prop('selectedIndex', "");
$('#search_by_type').prop('selectedIndex', "");
var brand_value = $(this).val();
if(brand_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-brand='"+ brand_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
// Default selected as blank value
$('#search_by_channel').prop('selectedIndex', "");
// Our work page - Search by Product Channel
$('#search_by_channel').change(function() {
$('#search_by_brand').prop('selectedIndex', "");
$('#search_by_type').prop('selectedIndex', "");
var channel_value = $(this).val();
if(channel_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-channel='"+ channel_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
// Default selected as blank value
$('#search_by_type').prop('selectedIndex', "");
// Our work page - Search by Product Type
$('#search_by_type').change(function() {
$('#search_by_brand').prop('selectedIndex', "");
$('#search_by_channel').prop('selectedIndex', "");
var type_value = $(this).val();
if(type_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-type='"+ type_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline">
<div class="form-group">
<label class="control-label">Brand</label>
<select class="form-control" id="search_by_brand" name="search_by_brand">
<option value="">Select Product Brand</option>
<option value="GLAM">GLAM</option>
<option value="PEDIGREE">PEDIGREE</option>
<option value="NESTLE">NESTLE</option>
<option value="HAVAIANAS">HAVAIANAS</option>
<option value="ROYAL CANIN">ROYAL CANIN</option>
<option value="EUKANUBA">EUKANUBA</option>
</select>
</div>
<div class="form-group m-l-30">
<label class="control-label">Channel</label>
<select class="form-control" id="search_by_channel" name="search_by_channel">
<option value="">Select Product Channel</option>
<option value="Pharmacy">Pharmacy</option>
<option value="Pet">Pet</option>
<option value="Department Store">Department Store</option>
<option value="Vet">Vet</option>
</select>
</div>
<div class="form-group m-l-30">
<label class="control-label">Type</label>
<select class="form-control" id="search_by_type" name="search_by_type">
<option value="">Select Product Type</option>
<option>Advertisement</option>
<option>Campaign</option>
</select>
</div>
</form>
<div class="filtr-container">
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="GLAM" data-channel="Vet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/10">
<img src="http://static.tumblr.com/yka2yx5/YHAm28h2j/glam_fb.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">GLAM</span><br>
<span class="f-s-23 lobstar">Daily Care</span><br>
<span class="roboto-light">Vet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="ROYAL CANIN" data-channel="Pet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/9">
<img src="http://www.royalcanin.com.au/extension/site_subsidiary_v3/design/subsidiary_v3/images/article/no-img-article.png" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">ROYAL CANIN</span><br>
<span class="f-s-23 lobstar">Feline Gondola End</span><br>
<span class="roboto-light">Pet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="HAVAIANAS" data-channel="Department Store" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/8">
<img src="http://image.brazilianbikinishop.com/images/products/flipflop-havaianas-brasil-logo-green-0.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">HAVAIANAS</span><br>
<span class="f-s-23 lobstar">Pop Up</span><br>
<span class="roboto-light">Department Store</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="NESTLE" data-channel="Pharmacy" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/7">
<img src="http://www.indiantelevision.com/sites/drupal7.indiantelevision.co.in/files/images/mam-images/2016/04/18/mam%20financials.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">NESTLE</span><br>
<span class="f-s-23 lobstar">Good Life</span><br>
<span class="roboto-light">Pharmacy</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="PEDIGREE" data-channel="Pet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/6">
<img src="https://www.petsworld.in/media/brands/6/pedigree2.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">PEDIGREE</span><br>
<span class="f-s-23 lobstar">Cleaner gets you closer</span><br>
<span class="roboto-light">Pet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="GLAM" data-channel="Pharmacy" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/5">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/GLAM_logo.png" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">GLAM</span><br>
<span class="f-s-23 lobstar">Beauty Bar</span><br>
<span class="roboto-light">Pharmacy</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
</div>
正如您在我的演示中所看到的，我正在搜索品牌，频道和类型的产品。但我想通过多个下拉菜单启用提升搜索功能。
现在它只搜索一个下拉列表，我希望能够搜索多个下拉列表，例如，如果我选择产品品牌“GLAM”和产品频道“药房”，则只有那些记录应该使用“AND”条件或jquery或类似的东西..
同样适用于产品类型..我该怎么办？
谢谢
答案 0 :(得分：2)
您可以为所有select元素分配一个类，并使用change绑定class selector，因为所有select elements的代码都相同。
如果filters为dropdown，您可以根据filters的值创建value of dropdown并动态添加selected。
$(document).ready(function () {
$('.selectFilter').change(function () {
var brand_value = $("#search_by_brand").val();
var channel = $('#search_by_channel').val();
var type = $("#search_by_type").val();
var channelFilter = "";
var typeFilter = "";
var brand_valueFiltr = "";
if (brand_value != '')
brand_valueFiltr = "[data-brand='" + brand_value + "']";
if (channel != '')
channelFilter = "[data-channel='" + channel + "']";
if (type != '')
typeFilter = "[data-type='" + type + "']";
$(".filtr-container div").hide();
$(".filtr-container div" + brand_valueFiltr + channelFilter + typeFilter).show().children().show();
$(".filtr-container").find(".mask").show();
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if (visible_divs == 0) {
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else {
$(".no_records").remove();
}
});
});
Here是jsfiddle