0

我有两个过滤内容的下拉列表。第一个是位置，第二个是工作。第一个列表过滤第二个。我正在使用 :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>

Javascript

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”出现在除“选择校园”选项之外的所有内容上。我怎么做？

4

1 回答 1

0

我不会在每次位置更改时循环使用 .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 的选项上添加值，则必须使该代码段复杂一些。它应该更有效并且也使维护更容易（没有例外，只处理一个从您使用的任何数据源填充的数组），因为您最终将获得一个非常灵活的解决方案

注意：您声明var select = $("#jobs")但随后使用 $(select); 这是一个无用的开销select直接使用

保持代码清晰的约定是将 $ 添加到缓存 jquery 对象的任何变量中：

 var $select=$("#select")

然后你用$select.whtever(//...

于 2013-02-08T17:59:10.080 回答