javascript - 如何在 jquery 操作后将 select 元素值设置为默认值？

Question

我有一个表单供用户根据类别和位置搜索某些内容，并且位置基于州和城市选项。因此，对于每个州选项，都有一个由该州城市列表组成的城市选择元素。 (即州选择中有10个州选项，每个州选项将显示不同的城市选择元素列表。因此，如果选择state1选项，则将显示state1中的城市列表，如果选择state2，则将隐藏其他城市列表，将显示 state2 中的城市列表，其他城市将被隐藏，依此类推)。我对这些选择元素使用两个 jquery 脚本。

第一个脚本是在用户搜索后操纵州和城市元素的值，这样如果他们要更改类别，则不需要重新选择州和城市选择元素，因为它们已经设置为用户搜索的值。

第二个脚本是根据所选的州选项显示/隐藏城市选择元素。

问题是，用户搜索示例后，state2的category1选项、state2选项和city1选项，然后如果用户想要更改为state3选项，state3城市列表选择将是空白的，因为该值设置为 state2 城市值，如何删除该值，以便当用户更改到另一个州时，城市选择元素将具有默认值(未设置值)？

如果我的解释有点不清楚，我很抱歉。无论如何，这里是更清晰的图片的代码。谢谢。

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脚本1(设置城市值，以便用户不需要重新选择):

$(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 脚本 2(每次状态选项更改时隐藏/显示):

$(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);
});

这就是我想要的过程:

1. 用户选择类别、州和城市并进行搜索
2. 页面返回结果，州和城市选择具有搜索的值(value)(如果用户想选择其他类别，用户不需要重新选择州和城市)。
3. 但是如果用户想要选择另一个州的另一个城市，当用户更改另一个州时，城市选择应该显示该选择元素中第一个选项的值，因为现在如果用户更改一个州，它将显示该元素的城市列表选择，但带有空白，而不是选择的第一个选项。

我尝试使用removeattr('selected'), prop('selected', false)，但仍然无法使城市选择在状态更改时显示第一个选项。抱歉，解释和代码相当困惑。非常欢迎所有实现我需要的建议。提前谢谢

Answer 1

使用ajax解决这个问题

Three interlinked dropdown

PHP Ajax Country State City Drop Down

Demo of linked drop down list by using Ajax & PHP