使用JavaScript过滤下拉菜单

Question

基于此处StackOverflow上的帖子 ，我试图制作一个下拉菜单，其内容取决于另一个下拉菜单的选择。

幸运的是，尽管我最初确实从数据库中获得了下拉菜单选项，但我发现的解决方案非常适用于我的问题。 不幸的是，我似乎无法获得解决方案。

可以从数据库中正确读取两个菜单，然后将其转换为正确的HTML代码。 因此似乎失败的是JavaScript，该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代码，我不能真正给您提供页面网址，因为它位于密码保护的后面：

<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

将此解决方案改编为类似问题后 ，以下应做您想做的：

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

编辑：您可以在DOM准备就绪后附加您的地址，如下所示：

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

Answer 3

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

只需查看该页面上的第四个示例 （标题为“按时区选择城市”），看看它是否满足您的要求。 如果您对如何设置还有其他疑问，我欢迎您提出疑问！