使用JavaScript过滤下拉菜单

Using JavaScript to filter a drop down menu

本文关键字：下拉菜单 过滤 JavaScript 使用      更新时间：2023-09-26

根据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>

我真的希望你能帮我找到我代码中的缺陷，我真的很生气…

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

从这个解决方案适应了一个类似的问题，下面应该做你想做的：

$(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>

我认为，问题在于语法中的简单错误——在条件if(typeof $(this).data('options') === "undefined")){ 中有额外的"）"

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

编辑：您可以在DOM准备好后附加您的hanlders，如下所示：

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

我希望我能正确理解你的问题，但听起来你想要的实际上是Select3库支持的用例，尽管它在嵌套的下拉列表中而不是单独的选择框中提供了选择。

只需看看该页面上的第四个示例（标题为"按时区选择城市"），看看它是否符合您的要求。如果你对如何设置它有任何其他问题，我愿意回答！

相关文章：