jQuery下拉列表包含過濾器

Question

我有兩個過濾內容的下拉列表。第一個是地點，第二個是工作。第一個列表過濾第二個列表。我使用a：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的，所以你可以看到它在行動Full Example

我試圖讓「Job 4」出現在除「選擇校園」選項之外的所有內容中。我怎麼做？

Answer 1

而不是用。每次每一次位置變化循環，並通過例外下去，我會創造在頁面加載一個索引

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(//...