使用 JavaScript 过滤下拉菜单

Question

在post here on Whosebug的基础上，我正在尝试做一个下拉菜单，其内容取决于另一个下拉菜单的选择。

幸运的是，我找到的解决方案非常适用于我的问题，尽管我最初是从数据库中获取下拉菜单选项的。然而不太幸运的是，我似乎无法找到解决方案。

两个菜单均从数据库中正确读取，并转换为正确的 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>

我真的希望你能帮我找出我代码中的缺陷，我真的很烦我......

更新 - 根据请求，这里是生成的 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

我认为，这个问题出在你的语法中的简单错误 - 你的条件中有额外的“)”if(typeof $(this).data('options') === "undefined")){

这是你的 jsfiddle，没有这个错误 - 它有效：http://jsfiddle.net/dn7fLny5/

编辑： 您可以在 DOM 准备好后附加您的手柄：

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

Answer 2

改编自 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 3

我希望我能正确理解你的问题，但听起来你想要的实际上是 Select3 library 支持的用例，尽管它在嵌套下拉列表中显示选项而不是分开 select 箱子。

只需查看该页面上的 fourth example（标题为 'Select a city by timezone'），看看它是否符合您的要求。如果您对如何设置有任何其他疑问，欢迎提问！

使用 JavaScript 过滤下拉菜单

Using JavaScript to filter a drop down menu

html

javascript

jquery

drop-down-menu