Rod
Rod

Reputation: 15475

dynamically populate select from two other selects on same page

I have 3 selects on my page. Two of the selects are populated and the 3rd is an empty select.

I'd like to dynamically combine the populated selects into the empty select and use the optgroup to separate them.

When an option is chosen from the super select, I'd like the other selects to auto set itself to whichever one is selected. And the select that wasn't chose should be set to blank option.

What are some different ways to approach this?

Resources available: 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

Upvotes: 1

Views: 121

Answers (2)

cssyphus
cssyphus

Reputation: 40076

Here's a solution using jQuery, since it is tagged for this question:

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

Upvotes: 1

Mateusz Mania
Mateusz Mania

Reputation: 849

Maybe my quick writen code helps You to build better solution.

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

Upvotes: 1

Related Questions