Question

使用'select2 - multi select'有三个下拉菜单，需要链接其中三个，其中一个中的选定值不应出现在另外两个中。当该选项被删除时，它应该显示为可供选择的选项。

最初可以看到一个下拉列表，另外两个是单击添加按钮时动态创建的

问题：重复未选择的值 - 选定的值不会显示在第二个下拉列表中，但未选中的值会显示两次。

从db获取值以填充第一个下拉列表。

Codeigniter VIEW：
这个隐藏字段用于使用java-script获取'masterOptionValue'：

    <div class="col-md-4" style="display: none;">
    <label style="display: none;" class="control-label" for="group">parent group</label>
    <?php
    $options = array();
    foreach ($groups as $group):
    {
        $i=$group['id'];
        $options[$i] = $group['group_name'];
    }
    endforeach;
    $selected_option = set_value('group');
    if(!$selected_option)
        $selected_option = '';
    $js=' style="display:none;" multiple data-plugin-selectTwo id="group" name="group" class="form-control populate immune" required tabindex=2';
    ?>

    <?php echo form_dropdown('group',$options,$selected_option,$js); ?>

</div>

第一个可见下拉列表，单击加号按钮时动态添加其他两个下拉列表。

<div class="col-md-4">

    <label class="" for="group"> Group</label>
    <?php
    $options = array();
    foreach ($groups as $group):
    {
        $i=$group['id'];
        $options[$i] = $group['group_name'];
    }
    endforeach;
    $selected_option = set_value('group');
    if(!$selected_option)
        $selected_option = '';
    $js='multiple data-plugin-selectTwo id="group" name="group" class="form-control input-sm slave group11" required tabindex=2';
    ?>

    <?php echo form_dropdown('group',$options,$selected_option,$js); ?>

</div>

以下是带有重复选项值的第二个下拉列表的屏幕截图，第一个下拉列表中的选定值“group2”未显示在第二个下拉列表中。所有其他值显示两次。

Javascript：

$(document).on("change", ".slave", function(){
        PopulateAllDropDowns();
    });


function PopulateAllDropDowns()
{
    // populate all the slave drop downs
    $('select.slave ').each(function(index){
    console.log('attr-id: '+$(this).attr('id'));
    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#group').children('option').each(function(index){

            // scope-safe var
            var masterOptionValue = $(this).val();
                //console.log('master drop down values : '+masterOptionValue);
            // 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;
                        //console.log('option in use :'+masterOptionValue+' : '+optionInUse );
                });

            }

            // 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());
                    console.log(newOption);
                // ensure selected value is preserved, if applicable
                if (selectedValue == $(this).val())
                    newOption.attr('selected', 'selected');

                // add the option
                $('#'+id).append(newOption);
            }

        });
    }

任何帮助都将受到高度赞赏，我知道逻辑有错误，请告诉我。

一个中的选定值不应出现在其他两个下拉列表中：Select2 - 多个下拉列表

0 个答案: