jQuery下拉列表包含过滤器

我有两个过滤内容的下拉列表。第一个是地点，第二个是工作。第一个列表过滤第二个列表。我使用a：contains来读取允许我的过滤器工作的字符串值。当我想一次使用两个包含过滤器时，我遇到了一个问题。下面是代码：jQuery下拉列表包含过滤器

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的，所以你可以看到它在行动Full Example

我试图让“Job 4”出现在除“选择校园”选项之外的所有内容中。我怎么做？

来源

2013-02-08 Courtney Stephenson

而不是用。每次每一次位置变化循环，并通过例外下去，我会创造在页面加载一个索引

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-08 17:59:10 mikakun

为什么不你只是用[]而不是新的数组？ – 2013-11-28 21:05:08

@Oliver是啊右'Array'可以被覆盖，所以你指的是什么？ – mikakun 2013-11-30 10:44:11

jQuery下拉列表包含过滤器

回答

相关问题