[英]jQuery Dropdown List Contains Filter
我有两个用于过滤内容的下拉列表。 第一个是地点,第二个是工作。 第一个列表过滤第二个。 我正在使用:contains读取允许我的过滤器工作的字符串值。 我想同时使用两个包含作为过滤器时遇到问题。 这是代码:
的HTML
<div class="holder">
<label for="volunteerLocation">Where do you want to volunteer?</label><br>
<select id="locations">
<option value="0">--Select a Campus--</option>
<option value="5">Location 1</option>
<option value="6">Location 2</option>
<option value="7">Location 3</option>
</select>
</div>
<br />
<div class="holder">
<label for="volunteerJobs">In which area would you like to serve?</label><br />
<select id="jobs">
<option value="1">Job 1 (Location 1)</option>
<option value="2">Job 2 (Location 2)</option>
<option value="3">Job 3 (Location 3)</option>
<option value="4">Job 4 (All locations)</option>
</select>
</div>
Java脚本
var select = $('#jobs');
var options = [];
$(select).find('option').each(function () {
options.push({ value: $(this).val(), text: $(this).text() });
});
$(select).data('options', options);
$('#locations').change(function () {
filterText = $("#locations option:selected").text();
var optionList = $(select).empty().data('options');
var j = 0;
$.each(optionList, function (i) {
var option = options[i];
if (option.text.indexOf(filterText) !== -1) {
if (j == 0) {
$('#jobs').prepend("<option value=''>--Select a Job--</option>").val('');
j++;
};
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
if (filterText == "--Select a Campus--") {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
})
})
这是一个JSLint,因此您可以在操作中查看它的完整示例
我正在尝试使“作业4”显示在除“选择校园”选项之外的所有内容上。 我怎么做?
而不是每次位置更改都循环使用.each并经历异常,而是在页面加载时创建索引
var locJobs=new Array();
然后用数据填充它,例如
locJobs['5']=new Array();
locJobs['5'] = ['job 1','job 2']
然后改变
$("#jobs").html('<option>'+locJobs[$(this).val()].join('</option><option>')+'</option>');
如果您需要在#jobs的选项上添加值,则必须使该代码段复杂一些。 它将带来更高的效率,并使维护变得更加容易(没有例外,仅使用要从所使用的任何数据源填充的数组就可以处理),因为您将获得非常灵活的解决方案
nb:您声明var select = $("#jobs")
但随后使用$(select); 那是无用的开销,直接select
保持代码清晰的约定是将$添加到正在缓存jquery对象的任何变量中:
var $select=$("#select")
然后您使用$select.whtever(//...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.