I've multiple dropdown lists and try to use jquery to sync available options in all dropdown list...
<select class="abc" id="test1">
<option value="" selected></option>
<option value="1">RTY</option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test2">
<option value="" selected></option>
<option value="1">RTY</option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test3">
<option value="" selected></option>
<option value="1">RTY</option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
If I select one item from one of the dropdown list, the selected option will be hide from others dropdownlist
<select class="abc" id="test1">
<option value="1" selected>RTY</option>
<option value=""></option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test2">
<option value=""></option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
<select class="abc" id="test3">
<option value=""></option>
<option value="2">QWE</option>
<option value="3">ASD</option>
<option value="4">ZXC</option>
<option value="5">BNM</option>
</select>
If I un-select it or select another item, the previous selected item will be show again in all dropdown list
RTY
QWE
ASD
ZXC
BNM
RTY
QWE
ASD
ZXC
BNM
RTY
QWE
ASD
ZXC
BNM
Below is my jquery code, managed to hide selected item from all dropdown lists, but not able to un-hide selected item.
$('.abc').change(function(){
$('.abc').each(function(){
if($('.abc').val() != '') {
$('option[value="'+$(this).val()+'"]').hide();
} else {
$('option[value!="'+$(this).val()+'"]').not(this).show();
}
});
});
What is wrong in my code?
You can store your current selected values in array and then just hide every of them like:
var vals = new Array();
$('.abc').change(function() {
vals = [];
$('.abc').each(function(){
var val = $(this).val();
if (val != ""){
vals.push(val);
}
$('option').show();
for (var i = 0; i< vals.length; i++){
$('option[value="' + vals[i] + '"]').hide();
}
});
});
Fiddle
What about something like this:
var $abs = $('.abc').change(function() {
$abs.children().show()
.end().not(this)
.find('[value="' + $(this).val() + '"]').hide();
});
Demo: http://jsfiddle.net/vw9z8bk1/1/
Related
I work on this project that user select there "region" and data belong or related to that region will be listed on the next "select box" called "city", I manage to workout the region and the city, it's working with the helped of this community here, and I'm so thankful.
my problem is, if I select specific city, data belong to that city must be on the list of barangay.
one thing before i forget, if the region is empty, the list of city must not display.
in case you need a fiddle
html
<script src="http://code.jquery.com/jquery-git.js"></script>
<p>SELECT YOUR THE REGION
<select type="text" value="" id="region">
<option value="">Please Select Your Region</option>
<option value="CompostelaValey">CompostelaValey</option>
<option value="DavaoOriental">DavaoOriental</option>
</select></p><br><br>
<p>SELECT YOUR THE CITY
<select type="text" name="city" id="city">
<option value="">Please Select City/Municipality</option>
<option value="DavaoOriental" id="Baganga">Baganga</option>
<option value="CompostelaValey" id="Maragusan">Maragusan</option>
<option value="DavaoOriental" id="MatiCity">MatiCity</option>
</select></p><br><br>
<p>SELECT YOUR THE BARANGAY
<select type="text" id="brgy">
<option value="">Barangay</option>
<option value="Baganga">Baculin</option>
<option value="Baganga">Batawan</option>
<option value="Baganga">Batiano</option>
<option value="Baganga">Binondo</option>
<option value="Baganga">Bobonao</option>
<option value="Baganga">Campawan</option>
<option value="Baganga">Central</option>
<option value="Baganga">Dapnan</option>
<option value="Baganga">Kinablangan</option>
<option value="Baganga">Lambajon</option>
<option value="Baganga">Lucod</option>
<option value="Baganga">Mahan-ub</option>
<option value="Baganga">Mikit</option>
<option value="MatiCity">Central</option>
<option value="MatiCity">Badas</option>
<option value="MatiCity">Matiao</option>
<option value="Maragusan">kalapagan</option>
</select></p><br><br>
script
$(document).ready(function() {
$("#region").change(function(){
var val=$(this).val();
$("#city option").hide();
$("#city").val("");
$("#city option[value='"+val+"']").show();
$("#city").change();
});
I've used the same hiding logic and used the id as value to filter the options:
$(document).ready(function() {
$("#city").change(function() {
var val = $(this).find(":selected").prop("id");
$("#brgy option").hide();
$("#brgy").val("");
$("#brgy option[value='" + val + "']").show();
});
$("#region").change(function() {
var val = $(this).val();
$("#city option").hide();
$("#city").val("");
$("#city option[value='" + val + "']").show();
$("#city").change();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>SELECT YOUR THE REGION
<select type="text" value="" id="region">
<option value="">Please Select Your Region</option>
<option value="CompostelaValey">CompostelaValey</option>
<option value="DavaoOriental">DavaoOriental</option>
</select>
</p><br><br>
<p>SELECT YOUR THE CITY
<select type="text" name="city" id="city">
<option value="">Please Select City/Municipality</option>
<option value="DavaoOriental" id="Baganga">Baganga</option>
<option value="CompostelaValey" id="Maragusan">Maragusan</option>
<option value="DavaoOriental" id="MatiCity">MatiCity</option>
</select>
</p><br><br>
<p>SELECT YOUR THE BARANGAY
<select type="text" id="brgy">
<option value="">Please Select Your Barangay</option>
<option value="Baganga">Baculin</option>
<option value="Baganga">Batawan</option>
<option value="Baganga">Batiano</option>
<option value="Baganga">Binondo</option>
<option value="Baganga">Bobonao</option>
<option value="Baganga">Campawan</option>
<option value="Baganga">Central</option>
<option value="Baganga">Dapnan</option>
<option value="Baganga">Kinablangan</option>
<option value="Baganga">Lambajon</option>
<option value="Baganga">Lucod</option>
<option value="Baganga">Mahan-ub</option>
<option value="Baganga">Mikit</option>
<option value="MatiCity">Central</option>
<option value="MatiCity">Badas</option>
<option value="MatiCity">Matiao</option>
<option value="Maragusan">kalapagan</option>
</select>
</p><br><br>
I have multiple select box with same options which are mutually exclusive .For example if select box A and select box B has option1 ,option2 and option 3 , Then if I select option1 for select box A, then it should not be available on select box B
My demonstration
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
$('.alert_type').change(function() {
var selected_value=$(this).val();
$(".alert_type option[value='" + selected_value + "']").not(this.selectedOptions[0]).hide();
});
But I want to make 1st option as exception i.e <option value="">Select below</option> as I need flexibility to revert all the option
You can see on fiddle below , if I select option1 from select box 1 ,"select below" from option 3 is also removed which I want to put in exception
Fiddle
https://jsfiddle.net/timus2001/rbuyk7na/3/
When I try with
$(".alert_type option").show();
to show all at first it is not mutually exclusive any more (see the picture)
Ok. let me see if I get you this time:
$('.alert_type').change(function() {
var selected_values = [],
iteration;
$(".alert_type option").show();
$(".alert_type").each(function(){
iteration = $(this).find('option:selected').val();
if ( iteration !== "" ) {
selected_values.push( iteration );
}
})
for ( var i = 0; i < selected_values.length; i++ ) {
$(".alert_type option[value='"+ selected_values[i] +"']").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
This is what you need:
$('select.alert_type').on('change keyup',function() {
var val = $(this).val();
$('select.alert_type option').prop('disabled',false);
$(this).siblings().find('option[value='+val+']').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
<select name="select" class="alert_type">
<option selected disabled>Select below</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
</select>
Good luck :D
I need to adapt some code I've used for a website I'm creating for a school I work for, to disallow certain options to be selected at the same time.
The user is presented the following HTML drop down list 6 times:
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
The user should NOT be able to select both Art and Textiles at the same time. They can select EITHER Art OR Textiles - but not both.
For example: User selects 'Art' in opt1, so Textiles is disabled in the remaining 5 menus. If the user goes back and deselects Art, Textiles should then be enabled throughout. Hopefully you understand what I mean.
I already have the code to prevent the same option being selected multiple times:
$(function() {
$('select').change(function(){
if($(this).attr('id') == 'opt1' && $(this).val() == 'Default'){
$('select').not(this).prop('disabled', true).val('Disabled');
} else {
$('select').not(this).removeProp('disabled');
$('select option').removeProp('disabled');
$('select').each(function() {
var val = $(this).val();
if(val != 'Default' || val != 'Disabled'){
$('select option[value="'+val+'"]').not(this).prop('disabled', true);
}
});
}
});
});
The user then clicks submit and all of this is then submit to a MySQL server for review at a later date.
Menus are named opt1, opt2, opt3, opt4, optRes1 and optRes2.
Thanks everyone,
Jack
I use a data attribute named notallowed. There you can set which value that should be disabled. And when a value is changed we also check if we previously disabled some fields and re-enable them.
$('select').change(function(){
var notAllowed = $(this).find('option:selected').data('notallowed');
var currentValue = $(this).val();
// Get the previous selected value.
var oldValue = $(this).data('old');
// Keep track of the previous selected value.
$(this).data('old', currentValue);
// Re-enabled all that was disabled by the previous selection.
if(oldValue) {
// Re-enable the old value in the other selects.
$('select').not(this).find('option[value="' + oldValue +'"]').prop('disabled', false);
// Get the option.
var previousNotAllowed = $(this).find('option[value="' + oldValue +'"]').data('notallowed');
if(previousNotAllowed){
$('select').not(this).find('option[value="' + previousNotAllowed +'"]').prop('disabled', false);
}
}
// If we selected a option with notallowed attribute we should disable that option in the other selects.
if(notAllowed){
var items = $('select').not(this).find('option[value="' + notAllowed +'"]').prop('disabled',true);
}
// Disable the current value in other selects.
$('select').not(this).find('option[value="' + currentValue +'"]').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select type="select" name="optRes1" select id="optRes1">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art" data-notallowed="Textiles">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing" data-notallowed="Drama">Computing</option>
<option value="Drama" data-notallowed="Computing">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles" data-notallowed="Art">Textiles</option>
</select>
Try to add a overlapping div with id selection and then select every select and disable the chosen option on change like so:
<div id="selection">
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option... </option>
<option value="Art">Art</option>
etc
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option... </option>
<option value="Art">Art</option>
etc
</select>
</div>
and the script
<script type="text/JavaScript" language="JavaScript">
$( "#optRes2" ).change(function() {
$("div#selection select.select option").each(function(){
if($(this).val()== $('#optRes2').val() ){
$(this).attr("disabled","true");
}
});
});
$( "#optRes3" ).change(function() {
$("div#selection select.select option").each(function(){
if($(this).val()== $('#optRes3').val() ){
$(this).attr("disabled","true");
}
});
});
</script>
Better create options array, and work with data, not with HTML. Using this approach you will be able to stay DRY.
Think solution is clear.
<html>
<body>
<select type="select" name="optRes3" select id="optRes1">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
<script>
function OptResDropdown(htmlDropdown, value) {
this.value = value;
this.dropdown = htmlDropdown;
this.options = this.initOptions(htmlDropdown.options);
var selected = htmlDropdown.options[htmlDropdown.selectedIndex];
this.value = value? value : (selected ? selected.value : 0);
var me = this;
htmlDropdown.addEventListener('change', function(event){
me.value = event.target.value;
me.update(me.value);
});
this.update();
}
OptResDropdown.instances = {};
OptResDropdown.prototype.initOptions = function(options){
var me = this;
var out = [];
for(var i = 0; i < options.length; i++) {
var option = options[i];
out.push({value: option.value, label: option.innerText});
}
return out;
};
OptResDropdown.prototype.update = function(value) {
for(var key in OptResDropdown.instances) {
var me = OptResDropdown.instances[key];
me.dropdown.innerHTML = '';
var options;
if(value === 'Art') {
options = me.options.filter(function(option){
return option.value !== 'Textiles';
});
} else if(value === 'Textiles') {
options = me.options.filter(function(option){
return option.value !== 'Art';
});
} else {
options = me.options;
}
options.forEach(function(option){
var opt = document.createElement('option');
opt.value = option.value;
opt.innerText = option.label;
me.dropdown.appendChild(opt);
})
me.dropdown.value = me.value;
}
};
var opt1 = new OptResDropdown(optRes1);
var opt2 = new OptResDropdown(optRes2);
var opt3 = new OptResDropdown(optRes3);
OptResDropdown.instances.opt1 = opt1;
OptResDropdown.instances.opt2 = opt2;
OptResDropdown.instances.opt3 = opt3;
</script>
</body>
</html>
I have two dropdowns, Selecting the first one should change the second automatically. Both dropdowns are visible always.
I have created a fiddle to get you started. Can you help me out. Thanks!
HTML Fiddle
<select name="" id="">
<option value="">-</option>
<option value="">Apple</option>
<option value="">Orange</option>
<option value="">Cucumber</option> <!-- veg -->
<option value="">Banana</option>
<option value="">Grapes</option>
<option value="">Onion</option> <!-- veg -->
<option value="">Tomato</option> <!-- veg -->
</select>
<select name="" id="">
<option value="">-</option>
<option value="">Fruit</option>
<option value="">Vegetable</option>
</select>
Use data-* attribute to differentiate among fruit and vegetable
var category = document.getElementById('category');
document.getElementById('elements').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != '-') {
if (optionSelected.dataset.val === 'veg') {
category.value = 'veg';
} else {
category.value = 'fruit';
}
} else {
category.value = '';
}
}
<select name="" id="elements">
<option value="">-</option>
<option value="">Apple</option>
<option value="">Orange</option>
<option data-val='veg' value="">Cucumber</option>
<!-- veg -->
<option value="">Banana</option>
<option value="">Grapes</option>
<option data-val='veg' value="">Onion</option>
<!-- veg -->
<option data-val='veg' value="">Tomato</option>
<!-- veg -->
</select>
<select name="" id="category">
<option value="">-</option>
<option value="fruit">Fruit</option>
<option value="veg">Vegetable</option>
</select>
If you are using jQuery it is simpler.
This is your jQuery code.
$('#item').on('change',function(){
$('#category').val($(this) .find("option:selected").attr('data-category'));
});
This is the modified HTML
<select name="" id="item">
<option value="">-</option>
<option data-category ="fruit" value="">Apple</option>
<option data-category ="fruit" value="">Orange</option>
<option data-category ="vegetable">Cucumber</option>
<option data-category ="fruit" value="">Banana</option>
<option data-category ="fruit" value="">Grapes</option>
<option data-category ="vegetable">Onion</option>
</select>
<select name="" id="category">
<option value="">-</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetables</option>
</select>
I am new in JS and I need some help. I want my 2-nd selectto appear only if the first one is already chosen, the 3-th select to appear after the second choise is done and the submit button to appear after the third choise is done.Is it possible to do that using a loop ?
<style>
select{float:left}
#month,#day,input{display:none}
</style>
<select required id='year' class='selectOption' onchange='select(this)'>
<option value=""> Select year</option>
<option value="">2016</option>
<option value="">2015</option>
<option value="">2014</option>
<option value="">2013</option>
<option value="">2012</option>
<option value="">2011</option>
<option value="">2010</option>
<option value="">2009</option>
<option value="">2008</option>
<option value="">2007</option>
</select>
<select required id='month' class='selectOption' onchange='select(this)'>
<option value=""> Select month</option>
<option value="">January</option>
<option value="">February</option>
<option value="">March</option>
<option value="">April</option>
<option value="">May</option>
<option value="">June</option>
<option value="">July</option>
<option value="">August</option>
<option value="">September</option>
<option value="">October</option>
<option value="">November</option>
<option value="">December</option>
</select>
<select required id='day' class='selectOption' onchange='select(this)'>
<option value="">Select Day</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
<input type="submit" class='selectOption'>
</form>
function select(par) {
var i = 0;
var x = document.getElementsByClassName('selectOption');
if (par.selectedIndex !== "0" && i<x.length) {
x[i++].style.display = 'block';
}
}
</script>
you can achieve this by hiding all select but the first one on page load and displaying them one by one after selecting the previous select.
<select required id='month' class='selectOption hide' onchange='select(this)'>
<select required id='day' class='selectOption hide' onchange='select(this)'>
plunker : http://plnkr.co/edit/oKwq0q4IB5poKuUOa6oG?p=preview
Define your function like this.
function select(par) {
if (par.selectedIndex !== 0) {
par.nextElementSibling.className = "selectOption";
}
}