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

вместо зацикливания с .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(//...