On select loading options in a select box

Question

I have a main drop down list which contains state names, when i select each state name i need to display the city names in a select box, but the select box name should be same because when i give different select box with same name the data is not storing in sql database. so i need to load the specific city names on each state select. any option

<option value="">Select your Location</option>
            <option value="CHENNAI">CHENNAI</option>
            <option value="GURGAON">GURGAON</option>
</select>
<select name="site">
              <option value=""> Select Site </option>
              <option value="City1"> City1</option>
              <option value="City2"> City2</option>
              <option value="City3"> City3</option>
              <option value="City3"> City3</option>
            </select>
<select name="site">
              <option value=""> Select Site </option>
              <option value="City1"> City1</option>
            </select>

Answer 1

Demo

You can use prop('disabled', true / false); to manage which city to choose. You should not have 2 selects with same name, so because you need them in sql I made a fix for it. Notice also in your post you miss first <select> and "City 3" comes up 2 times.

html

<select name="state" id="sel_state">
    <option value="">Select your Location</option>
    <option value="CHENNAI">CHENNAI</option>
    <option value="GURGAON">GURGAON</option>
</select>
<select name="site" id="CHENNAI">
    <option value="">Select Site</option>
    <option value="City1">City1</option>
    <option value="City2">City2</option>
    <option value="City3">City3</option>
    <option value="City4">City3</option>
</select>
<select name="site" id="GURGAON">
    <option value="">Select Site</option>
    <option value="City1">City1</option>
</select>

jQuery

$(function () {

    $("#sel_state").change(function () {
        var a = $("#sel_state option:selected").text();
        if (a == 'CHENNAI') {
        $('#GURGAON').prop('disabled', true);
        $('#CHENNAI').prop('disabled', false);
        $('#GURGAON').prop('name', 'site_ignored');
        $('#CHENNAI').prop('name', 'site');
    }
    if (a == 'GURGAON') {
        $('#CHENNAI').prop('disabled', true);
        $('#GURGAON').prop('disabled', false);
        $('#GURGAON').prop('name', 'site');
        $('#CHENNAI').prop('name', 'site_ignored');
    }

    });
});