Jquery Multiple Select Option Dynamic
When user select this value, the next select option will remove
by fido3993
HTML
1.) <select id="select1">
</select>
2.) <select id="select2">
</select>
3.) <select id="select3">
</select>
<div class="template hide">
<option value="0">-- Select --</option>
<option value="1">Question1 </option>
<option value="2">Question2 </option>
<option value="3">Question3 </option>
<option value="4">Question4 </option>
<option value="5">Question5 </option>
<option value="6">Question6 </option>
<option value="7">Question7 </option>
<option value="8">Question8 </option>
<option value="9">Question9 </option>
<option value="10">Question10 </option>
</div>
CSS
.hide
{
display: none;
}
JavaScript
$(function() {
// Load all the dropdowns
$('[id^=select]').html($('.template').html());
// This array Holds the Objects
var arr = ['select1', 'select2', 'select3'];
// Declare a array where you store the selections
var arrSelect = {
'select1': '0',
'select2': '0',
'select3': '0'
};
$('select').on('change', function() {
var currID = $(this).prop('id');
// Set the Current selection
arrSelect[currID] = $(this).val();
// Iterate Thru each dropdown
$.each(arr, function(i) {
var temp = arrSelect[arr[i]];
// Clone the template
var $clone = $('.template').clone();
// Remove Questions from template based on selected
// values in other select's
$.each(arrSelect, function(index, value) {
if (value != 0 && value != temp) {
$clone.find('option[value=' + value + ']').remove();
}
});
// If not Current select rewrite its
// contents of the select
if (arr[i] != currID) {
//console.log('#' + arr[i] + ' :: ' + $clone.html());
$('#' + arr[i]).html('').html($clone.html());
$('#' + arr[i]).val(temp);
}
});
});
})