Question

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

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

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

Answer 1

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

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

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

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>

希望有所帮助。

Answer 2

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

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

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

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

2 个答案: