Reputation: 15475
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>
Upvotes: 1
Views: 121
Reputation: 40076
Here's a solution using jQuery, since it is tagged for this question:
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
Reputation: 849
Maybe my quick writen code helps You to build better solution.
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