June 20, 2020

Adding Dynamic Dropdown By Clicking Button And Item Selected In One Dropdown Should Not Be Available In Another Dropdown

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>
Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *