如何在由jquery操纵后将选择元素值设置为默认值？

Question

I have a form for my user to search for something based on the category and location, and the location is based on state and city options. So for each state option, there is a city select element consisting of list of cities in the state. (ie There are 10 states option in the states select, each state option will show a different list of cities select element. so if state1 option is selected, list of cities in state1 will be shown and others will be hidden, if state2 is selected, list of cities in state2 will be shown and others will be hidden and so on). I am using two jquery scripts for these select elements.

The first script is to manipulate the value of state and city element after a user search, so that if they are going to change category, they would not need to re-select the state and city select elements as they are already set to the value that the user searched.

The second script is to show/hide the cities select element based on the states option selected.

The problem is, after a user search for a example, category1 option, state2 option, and city1 option of state2, then if the user want to change to state3 option, the state3 cities list select will be blank, because the value is set to the state2 city value, how do I remove this value, so that when a user change to another state, the city select element will have default value(no value set) ?

I am sorry if my explanation a bit unclear. Anyway here is the code for clearer picture. Thx.

html :

<select name='category'>
    <option value='category1'>Category1</option>
    <option value='category2'>Category2</option>
    ..
</select>

<select name='state' class='state'>
    <option value='state1' class='cities_state1'>State1</option>
    <option value='state2' class='cities_state2>State2</option>
    ...
</select>

<select name='city' class='cities' id='cities_state1' disabled>
    <option value='city_1_in_state1'>City 1 in state1</option>
    <option value='city_2_in_state1'>City 2 in state1</option>
    ...
</select>

<select name='city' class='cities' id='cities_state2' disabled>
    <option value='city_1_in_state2'>City 1 in state2</option>
    <option value='city_2_in_state2'>City 2 in state2</option>
    ...
</select>

css :

.cities {
    display: none;
}

jquery script 1 (set value of city so that user does not need to re-select) :

$(document).ready(function() {
    $('.state').val('<?php echo $_GET['state'];?>');

    //get the class attribute of option selected in state select element
    var city = $('.state option:selected').attr('class');

    //Show cities list of selected state
    $('#' + city).show();
    $('#' + city).prop('disabled', false);

    //Hide other cities list not of selected state
    $(.cities).not('#' + city).hide();
    $(.cities).not('#' + city).prop('disabled', true);

    //manipulate value of city select
    $(.cities).val('<?php echo $_GET['city'];?>');
});

Jquery script 2 (hide/show everytime state option changed) :

$(document).ready(function() {
    $('.state').change(function() {

    //get the class attribute of option selected in state select element
    var city = $('.state option:selected').attr('class');

    //Show cities list of selected state
    $('#' + city).show();
    $('#' + city).prop('disabled', false);

    //Hide other cities list not of selected state
    $(.cities).not('#' + city).hide();
    $(.cities).not('#' + city).prop('disabled', true);
});

This is how the process that I want :

1. User select a category, state and a city and search
2. Page return with result, and state and city select has the value of the search (incase user want to select another category, user does not need to re-select state and city).
3. But if user want to choose another city of another state, when user change another state, the city select should show the value of the first option in that select element, because now if a user change a state, it will show the city list select of that element but with blank, instead of the first option of the select.

I have tried using removeattr('selected'), prop('selected', false), but still unable to make the city select to show the first option when state is changed. Sorry for the quite messy explanation and code. All suggestion to achieve what I need is very welcomed. Thx in advance

Answer 1

Use ajax for this problem

Three interlinked dropdown

PHP Ajax Country State City Drop Down

Demo of linked drop down list by using Ajax & PHP

Answer 2

Try below code -

NOTE - you need not to use document.ready multiple times. Use it once and put all your script code inside it.

$(document).ready(function() {
    //set initial code when page loads
    //set state1 selected
    $('.state').val('state1');
    //get class value for selected state and use it to select city
    var city = $('.state option:selected').attr('class');

    //Hide other cities list not of selected state
    $('.cities').hide();

    //Show cities list of selected state
    $('#' + city).show();

    //manipulate value of city select
    $('.cities').val('city_1_in_state1');

    //Add state select box listener    
    $('.state').change(function() {

       //get the class attribute of option selected in state select element
       var city = $(this).find('option:selected').attr('class');

       //Hide other cities list not of selected state
       $('.cities').hide();

       //Show cities list of selected state
       $('#' + city).show();
       //set non blank option to select
       $('#' +city).find('option:not(:empty):first').prop('selected',true);
   });
});

JSFiddle Demo