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>