Question

我的页面上有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 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');
});

Answer 2

这是一个使用jQuery的解决方案，因为它被标记为这个问题：

jsFiddle Demo

<强> HTML：

<select id="main"><option value="one">Build me dynamically</option></select>
<select id="source1">
    <option value="srcOne-1">S1 One</option>
    <option value="srcOne-2">S1 Two</option>
    <option value="srcOne-3">S1 Three</option>
</select>
<select id="source2">
    <option value="srcTwo-1">S2 the Firste</option>
    <option value="srcTwo-2">S2 Two</option>
</select>

<强> jQuery的：

var main1 = $('#main');
var src1 = $('#source1');
var src2 = $('#source2');
main1.css({'background':'yellow'}); //testing only - used to see if js is broken...

$(main1).change(function(){
    $this = $(this);
    var grp = $this.find('option:selected').parent().attr('label').split(' ')[1];
    var opt = $this.val();
    $('#source'+grp).val(opt);
});

/*  Setup the dynamic select */
var grp1 = $('<optgroup>');
grp1.attr('label','Group 1');    
var grp2 = $('<optgroup>');
grp2.attr('label','Group 2');    

for (var i=0; i<src1.children('option').length; i++){      
    var x = src1.find('option:eq('+i+')').text();
    var y = src1.find('option:eq('+i+')').val();
    grp1.append($('<option>', {
        text: x,
        value: y
    }));
}
main1.append(grp1);

for (var i=0; i<src2.children('option').length; i++){      
    var x = src2.find('option:eq('+i+')').text();
    var y = src2.find('option:eq('+i+')').val();
    grp2.append($('<option>', {
        text: x,
        value: y
    }));
}
main1.append(grp2);

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

2 个答案: