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

Question

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

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

当从 super 选择中选择一个选项时，我希望其他选择自动将自己设置为选择的任何一个。未选中的选择应设置为空白选项。

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

可用资源: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 Work

Answer 1

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

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');
});