动态填充同一页面上其他两个选择的选择

Rod 发表于 Dev

竿

我的页面上有3个选择。填充两个选择，第三个是空选择。

我想将填充的选择动态组合到空选择中，并使用optgroup将它们分开。

从超级选择中选择一个选项后，我希望其他选择自动将其自身设置为选择的任何一个。并且未选择的选择应设置为空白选项。

有哪些不同的方法可以解决此问题？

可用资源：jQuery

<select id="sel1"></select>
<select id="source1"><option value="srcOne">Source One</option></select>
<select id="source2"><option value="srcTwo">Source Two</option></select>

Here's the desired result:

<select id="sel1">
    <optgroup label="Group 1">
        <option value="srcOne">Source One</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="srcTwo">Option Two</option>
    </optgroup>
</select>

JSFiddle工作

马特斯疯狂

也许我快速编写的代码可以帮助您建立更好的解决方案。

JSFiddle

HTML：

<select id="main">
    <option>Not updated</option>
</select>
<select id="source1" data-name="Source 1">
    <option value="0"></option>
    <option value="srcOne1">Source One - Option 1</option>
    <option value="srcOne2">Source One - Option 2</option>
</select>
<select id="source2" data-name="Source 2">
    <option value="0"></option>
    <option value="srcTwo1">Source Two - Option 1</option>
    <option value="srcTwo2">Source Two - Option 2</option>
    <option value="srcTwo3" selected>Source Two - Option 3 (default selected)</option>
    <option value="srcTwo4">Source Two - Option 4</option>
</select>

JS：

$(document).ready(function (){

    $('#main').html('');

    $('#source1, #source2').each(function (){

        var optgroup = $('<optgroup label="'+$(this).data('name')+'"></optgroup>');
        var sourceId = $(this).attr('id');

        $(this).find('option').each(function (){

            if($(this).val() !== '0'){

                var option = $(this).clone();                
                $(option).data('source-id', sourceId);
                $(optgroup).append(option);
            }
        });

        $('#main').append(optgroup);
    });

    $('#main').on('change', function (){

        var selectedOption = $('option[value="'+$(this).val()+'"]');      

        $('#source1, #source2').val('0');
        $('#'+$(selectedOption).data('source-id')).val($(this).val());
    }).trigger('change');
});