Использование JavaScript для фильтрации выпадающего меню

Question

На основе post here on StackOverflow, я пытаюсь создать раскрывающееся меню, содержимое которого зависит от выбора другого выпадающего меню.

К счастью, решение, которое я нашел, очень применимо к моей проблеме, хотя изначально я получил свои выпадающие меню из базы данных. Меньше счастья, однако, заключается в том, что я не могу найти решение для работы.

Оба меню правильно считываются из базы данных и преобразуются в правильный HTML-код. Так что, похоже, сбой - это JavaScript, который используется для фильтрации параметров во втором выпадающем меню. Мой код выглядит следующим образом:

<div id="selection"> 
    <?php 
     // Top level part selection 
     echo "<select name='firstLevelParts' id='select1'>"; 
     foreach ($category_primary as $category_item): 
      echo "<option value = '".$category_item['cat_primary_id']."'>".$category_item['cat_primary_name']."</option>"; 
     endforeach; 
     echo "</select>"; 


     // Second level part selection (This should be updated, based on selection in top level menu) 
     echo "<select name='secondLevelParts' id='select2'>"; 
     foreach ($category_secondary as $cat_sec_item): 
      echo "<option value='".$cat_sec_item['cat_secondary_code']."'>".$cat_sec_item['cat_secondary_name']."</option>"; 
     endforeach; 
     echo "</select>"; 
    ?> 

</div> 


<script> 
    $("#select1").change(function() { 
     if(typeof $(this).data('options') === "undefined")){ 
      /*Taking an array of all options-2 and kind of embedding it on the select1*/ 
      $(this).data('options',$('#select2 option').clone()); 
      } 
     var id = $(this).val(); 
     var options = $(this).data('options').filter('[value=' + id + ']'); 
     $('#select2').html(options); 
    }); 
</script> 

Я действительно надеюсь, что вы можете мне помочь локализации изъян в моем коде, я действительно раздражает черт из меня ...

Update - По желанию, здесь в результате HTML-коде, я не могу дать вам URL страницы, так как она находится за защитой пароля:

<div id="selection"> 
<select name='firstLevelParts' id='select1'> 
<option value = '1'>Terræn</option> 
<option value = '2'>Fundamentsystem</option> 
<option value = '3'>Vægsystem</option> 
<option value = '4'>Dæksystem</option> 
<option value = '5'>Tagsystem</option> 
</select> 

<select name='secondLevelParts' id='select2'> 
<option value='1'>Jordprofil</option> 
<option value='2'>Befæstet Areal</option> 
<option value='3'>Beplantning</option> 
<option value='1'>Fundamentkonstruktion</option> 
<option value='2'>Bærelag</option> 
<option value='3'>Åbning</option> 
<option value='4'>Lukning</option> 
<option value='5'>Inddækning</option> 
<option value='6'>Afslutning</option> 
<option value='7'>Afskærmning</option> 
<option value='8'>Fuge</option> 
<option value='9'>Samling</option> 
<option value='10'>Overflade</option> 
</select> 
</div> 

<script> 
    $("#select1").change(function() { 
     if(typeof $(this).data('options') === "undefined")){ 
      /*Taking an array of all options-2 and kind of embedding it on the select1*/ 
      $(this).data('options',$('#select2 option').clone()); 
      } 
     var id = $(this).val(); 
     var options = $(this).data('options').filter('[value=' + id + ']'); 
     $('#select2').html(options); 
    }); 
</script> 

Answer 1

адаптирован из this solution to a similar problem приведенных ниже должен делать то, что вы хотите :

$(function() { 
 
    $('#select').filterByValues($('.filterElements')); 
 
    $('.filterElements').change(); 
 
}); 
 

 

 
jQuery.fn.filterByValues = function(masterSelects) { 
 
    return this.each(function() { 
 
    var select = this; 
 
    var options = []; 
 
    $(select).find('option').each(function() { 
 
     options.push({value: $(this).val(), text: $(this).text()}); 
 
    }); 
 
    $(select).data('options', options); 
 
    
 
    masterSelects.bind('change', function() { 
 
     var options = $(select).empty().scrollTop(0).data('options'); 
 
     var vals=[]; 
 
     $(masterSelects).each(function(i,e){ 
 
     vals.push('^'+$.trim($(e).val())+'$'); 
 
     }); 
 
     var search = vals.join('|'); 
 
     var regex = new RegExp(search,'gi'); 
 

 
     $.each(options, function(i) { 
 
     var option = options[i]; 
 
     if(option.value.match(regex) !== null) { 
 
      $(select).append(
 
      $('<option>').text(option.text).val(option.value) 
 
     ); 
 
     } 
 
     }); 
 
    }); 
 
    
 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="selection"> 
 
<select name='firstLevelParts' class='filterElements'> 
 
<option value = '0'>(Select category)</option> <!-- added --> 
 
<option value = '1'>Terræn</option> 
 
<option value = '2'>Fundamentsystem</option> 
 
<option value = '3'>Vægsystem</option> 
 
<option value = '4'>Dæksystem</option> 
 
<option value = '5'>Tagsystem</option> 
 
</select> 
 
    
 
<select name='firstLevelPartsB' class='filterElements'> 
 
<option value = '0'>(Select category)</option> <!-- added --> 
 
<option value = '1'>Terræn</option> 
 
<option value = '2'>Fundamentsystem</option> 
 
<option value = '3'>Vægsystem</option> 
 
<option value = '4'>Dæksystem</option> 
 
<option value = '5'>Tagsystem</option> 
 
</select> 
 

 
<select name='secondLevelParts' id='select'> 
 
<option value='1'>Jordprofil</option> 
 
<option value='2'>Befæstet Areal</option> 
 
<option value='3'>Beplantning</option> 
 
<option value='1'>Fundamentkonstruktion</option> 
 
<option value='2'>Bærelag</option> 
 
<option value='3'>Åbning</option> 
 
<option value='4'>Lukning</option> 
 
<option value='5'>Inddækning</option> 
 
<option value='6'>Afslutning</option> 
 
<option value='7'>Afskærmning</option> 
 
<option value='8'>Fuge</option> 
 
<option value='9'>Samling</option> 
 
<option value='10'>Overflade</option> 
 
</select> 
 
</div>

Answer 2

Я думаю, что проблема заключается в простых ошибках в вашем синтаксисе - у вас есть дополнительные «)» в ваше состояние if(typeof $(this).data('options') === "undefined")){

Вот ваш jsfiddle без этой ошибки - это работает: http://jsfiddle.net/dn7fLny5/

EDIT: Вы можете прикрепить свои hanlders после DOM готовы, как это:

<script> 
    $(document).ready(function() { 
     $("#select1").change(function() { 
      // your code 
     }); 
    }); 
</script> 

Answer 3

Надеюсь, я правильно понимаю ваш вопрос, но похоже, что вы хотите использовать на практике Select3 library, хотя он представляет варианты в вложенных выпадающих списках, а не в отдельных выделенных блоках.

Просто взгляните на fourth example на этой странице (под названием «Выберите город по часовой стрелке») и посмотрите, делает ли он то, что вы хотите. Если у вас есть другие вопросы о том, как его настроить, я открыт для вопросов!