使用Javascript维护一组选择下拉列表

Maintain a set of select drop down lists using Javascript

本文关键字：一组 选择 下拉列表 Javascript 维护 使用      更新时间：2023-09-26

我有一组下拉列表（总共8个）。所有下拉列表都有相同的下拉选项集。但是，业务要求是确保用户不能多次选择同一个选项。

看看这个问题，一开始它看起来很简单，但很快就变成了大量的代码。然而，这似乎是一个相对常见的问题。有人知道解决方案吗？有没有关于如何在不编写大量Javascript的情况下做到这一点的提示。某种可重用的jquery插件可能也很方便。一个存在吗？

一个问题是，当选择一个选择项目时，其他选择列表将无法使用该项目。该项目将从其他选择下拉列表中删除。当它再次可用时（下拉菜单发生更改），需要将其插入列表中的正确位置（下拉菜单选项有顺序）。这是我的解决方案开始变得相当复杂的地方。

就我个人而言，实现它的方式是有一个包含所有可能选项的"master"下拉列表，只是为了缓存。然后在每个"从属"下拉列表中复制这些选项。每当更改任何从属下拉列表时，都会重新填充它们，以确保没有两个下拉列表可以共享相同的选定值。

出于演示的目的，我在下面的代码中只使用了3个下拉列表，但它应该很容易扩展。只需添加模式下拉列表，并确保它们包含属性class="slave"。

此外，如果您希望任何选项都不被删除，以便它可以存在于所有从属下拉列表中（例如下面代码中的默认选项），只需将属性class="immune"添加到主下拉列表中的选项标签即可。

<script type="text/javascript">
    // document - on load
    $(document).ready(function() {
        // initially populate all the drop downs
        PopulateAllDropDowns();
        // populate all drop downs on each subsequent change
        $('select.slave').change(function(){
            PopulateAllDropDowns();
        });
    });
    function PopulateAllDropDowns()
    {
        // populate all the slave drop downs
        $('select.slave').each(function(index){
            PopulateDropDown($(this).attr('id'));
        });
    }
    function PopulateDropDown(id)
    {
        // preserve the selected value
        var selectedValue = $('#'+id).val();
        // clear current contents
        $('#'+id).html('');
        // attempt to add each option from the master drop down
        $('select#ddlTemplate').children('option').each(function(index){
            // scope-safe var
            var masterOptionValue = $(this).val();              
            // check if option is in use in another slave drop down, unless it's immune
            var optionInUse = false;
            if (!$(this).hasClass("immune"))
            {
                $('select.slave option:selected').each(function(index){
                    if (masterOptionValue == $(this).val() )
                        optionInUse = true;
                });
            }               
            // if it's not in use, add it to this slave drop down
            if (!optionInUse)
            {
                // create new option
                var newOption = $('<option></option>').val($(this).val()).html($(this).text());
                // ensure selected value is preserved, if applicable
                if (selectedValue == $(this).val())
                    newOption.attr('selected', 'selected')
                // add the option                   
                $('#'+id).append(newOption);
            }
        });
    }       
</script>

 

<form>
    <!-- master drop down -->
    <select id="ddlTemplate" class="master" style="display:none">
        <option value="" class="immune">Select ...</option>
        <option value="a">Option A</option>
        <option value="b">Option B</option>
        <option value="c">Option C</option>
        <option value="d">Option D</option>
        <option value="e">Option E</option>
    </select>
    <!-- slave drop downs -->
    <select id="ddlOne" class="slave"></select>
    <select id="ddlTwo" class="slave"></select>
    <select id="ddlThree" class="slave"></select>
</form>

希望能有所帮助。

执行所需操作的最简单方法是在下拉列表中的select事件中绑定一个函数，该函数可从所有其他下拉列表中筛选内容，并删除或禁用已选择值的选项。

要保持列表中的顺序，请将选项列表缓存在数组中，然后可以删除并添加到正确的位置，或者删除所有选项并重新添加当前可能的选项。

如果您想重新选择缓存的已选择选项，并且不会丢失任何内容。

相关文章：