If you want to add dynamic dropdown in your Web page than this blog will help.This blog will help to create dropdown by clicking a button and item selected in one dropdown will not available in another dropdown.
Example:
1st Dropdown has options : 1 , 2, 3, 4 and “1” is selected.
2nd Dropdown will have options : 2, 3, 4 as “1” is selected from previous dropdown similarly , next dropdown will have options which are not selected in previous dropdowns.
Here , CSS/HTML and Javascript/Jquery is used.
CSS Code
select,input {
margin: 30px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Javascript/Jquery Code
<script>
$(document).ready(function() {
var numberOfRows = 1;
var ValueArray = [1, 2, 3, 4];
$("#doAddRow").click(function(event) {
event.preventDefault();
if (numberOfRows < 4) {
numberOfRows++;
for (var i = 0; i <= numberOfRows - 1; i++) {
if ($("#noOfAdults" + i).length) {
var value = $("#noOfAdults" + i).val();
for (var j = 0; j <= ValueArray.length; j++) {
if (ValueArray[j] == value) {
ValueArray.splice(j, 1);
var tableRow = '<tr id="row' + numberOfRows + '">' +
'<td><input id="tierNumber' + numberOfRows + '" type="text" value="' + numberOfRows + '"/></td>' +
'<td><select id="noOfAdults' + numberOfRows + '"><option value="' + ValueArray[0] + '">' + ValueArray[0] + '</option><option value="' + ValueArray[1] + '">' + ValueArray[1] + '</option><option value="' + ValueArray[2] + '">' + ValueArray[2] + '</option></option><option value="' + ValueArray[3] + '">' + ValueArray[3] + '</option> <select/></td>' +
'<td><input id="charge' + numberOfRows + '" type="text" type="text" readonly="readonly" value="N/A"/></td>' +
"</tr>";
$('#tiers > tbody:last').append(tableRow);
$("select option[value='undefined']").remove();
}
}
}
}
} else {
$('#doAddRow').attr("disabled", "true");
}
});
});
</script>
HTML Code
<div>
<table id="tiers" class="grid" align="center" width="500">
<thead>
<tr>
<th>Serial Number</th>
<th id="#" align="center" style="width:12%">No. Of Students</th>
<th align="center" style="width:25%">Fee Charges:
<div style="font-size: 10px;">(in USD)</div>
</th>
</tr>
</thead>
<tbody>
<tr id="row0">
<td>
<input id="tierNumber1" type="text" value="1" />
</td>
<td>
<select id="noOfAdults1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<select/>
</td>
<td>
<input id="charge1'" type="text" type="text" readonly="readonly" value="N/A" />
</td>
</tr>
</tbody>
</table>
<br>
<table>
<center>
<button type="button" id="doAddRow">Add New Row</button>
</center>
</table>
</div>
Here Is Full Page Code
<html>
<head>
<style>
select,
input {
margin: 30px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function() {
var numberOfRows = 1;
var ValueArray = [1, 2, 3, 4];
$("#doAddRow").click(function(event) {
event.preventDefault();
if (numberOfRows < 4) {
numberOfRows++;
for (var i = 0; i <= numberOfRows - 1; i++) {
if ($("#noOfAdults" + i).length) {
var value = $("#noOfAdults" + i).val();
for (var j = 0; j <= ValueArray.length; j++) {
if (ValueArray[j] == value) {
ValueArray.splice(j, 1);
var tableRow = '<tr id="row' + numberOfRows + '">' +
'<td><input id="tierNumber' + numberOfRows + '" type="text" value="' + numberOfRows + '"/></td>' +
'<td><select id="noOfAdults' + numberOfRows + '"><option value="' + ValueArray[0] + '">' + ValueArray[0] + '</option><option value="' + ValueArray[1] + '">' + ValueArray[1] + '</option><option value="' + ValueArray[2] + '">' + ValueArray[2] + '</option></option><option value="' + ValueArray[3] + '">' + ValueArray[3] + '</option> <select/></td>' +
'<td><input id="charge' + numberOfRows + '" type="text" type="text" readonly="readonly" value="N/A"/></td>' +
"</tr>";
$('#tiers > tbody:last').append(tableRow);
$("select option[value='undefined']").remove();
}
}
}
}
} else {
$('#doAddRow').attr("disabled", "true");
}
});
});
</script>
<div>
<table id="tiers" class="grid" align="center" width="500">
<thead>
<tr>
<th>Serial Number</th>
<th id="#" align="center" style="width:12%">No. Of Students</th>
<th align="center" style="width:25%">Fee Charges:
<div style="font-size: 10px;">(in USD)</div>
</th>
</tr>
</thead>
<tbody>
<tr id="row0">
<td>
<input id="tierNumber1" type="text" value="1" />
</td>
<td>
<select id="noOfAdults1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<select/>
</td>
<td>
<input id="charge1'" type="text" type="text" readonly="readonly" value="N/A" />
</td>
</tr>
</tbody>
</table>
<br>
<table>
<center>
<button type="button" id="doAddRow">Add New Row</button>
</center>
</table>
</div>
</body>
</html>