Json Select List

by Nick Hulea

HTML

<tr id="add_reservation_row_1">
    <td class="bl_150px select_add_reservation_1_error">First Choice:</td>
    <select name="select_add_reservation_1" id="select_add_reservation_1" class="select_add_reservation"></select>
</tr>
<br>
<br>
    
<tr id="add_reservation_row_2" class="add_reservation_row" style="display: none;">
    <td class="bl_150px select_add_reservation_2_error">Second Choice:</td>
    <select name="select_add_reservation_2" id="select_add_reservation_2" class="select_add_reservation"></select>
</tr>
<br>
<br>
<tr id="add_reservation_row_3" class="add_reservation_row" style="display: none;">
    <td class="bl_150px select_add_reservation_3_error">Third Choice:</td>
    <select name="select_add_reservation_3" id="select_add_reservation_3" class="select_add_reservation"></select>
</tr>
<br>
<br>
<tr id="add_reservation_row_4" class="add_reservation_row" style="display: none;">
    <td class="bl_150px select_add_reservation_4_error">Fourth Choice:</td>
    <select name="select_add_reservation_4" id="select_add_reservation_4" class="select_add_reservation"></select>
</tr>

JavaScript

var jsonList = {
    "Table": [{
        "stateid": "2",
            "statename": "Tamilnadu"
    }, {
        "stateid": "3",
            "statename": "Karnataka"
    }, {
        "stateid": "4",
            "statename": "Andaman and Nicobar"
    }, {
        "stateid": "5",
            "statename": "Andhra Pradesh"
    }, {
        "stateid": "6",
            "statename": "Arunachal Pradesh"
    }]
};

$(document).ready(function () {
    var listItems = '';
    for (var i = 0; i < jsonList.Table.length; i++) {
        listItems += "<option value='" + jsonList.Table[i].stateid + "'>" + jsonList.Table[i].statename + "</option>";
    }
    $("#select_add_reservation_1").html(listItems);
    $("#select_add_reservation_2").html(listItems);
    $("#select_add_reservation_3").html(listItems);
    $("#select_add_reservation_4").html(listItems);
});


$("#select_add_reservation_1").val('');
$("#select_add_reservation_2").val('');
$("#select_add_reservation_3").val('');
$("#select_add_reservation_4").val('');

$("#select_add_reservation_1").change(

function () {
    choice = $("#select_add_reservation_1").val();
    if ((choice === "") || (choice === "None")) {
        $(".add_reservation_row").hide();
        $(".select_add_reservation").val('');
    } else {
        $("#add_reservation_row_2").show();
    }
});



$("#select_add_reservation_2").change(

function () {
    choice = $("#select_add_reservation_2").val();
    if ((choice === "") || (choice === "None")) {
        $("#add_reservation_row_4").hide();
        $("#select_add_reservation_4").val('');
        $("#add_reservation_row_3").hide();
        $("#select_add_reservation_3").val('');
    } else {
        $("#add_reservation_row_3").show();
    }
});

$("#select_add_reservation_3").change(

function () {
    choice = $("#select_add_reservation_3").val();
    if ((choice === "") || (choice === "None")) {
        $("#add_reservation_row_4").hide();
        $("#select_add_reservation_4").val('');
       ...