Question

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

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

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

问题是，在用户搜索一个示例，category1选项，state2选项和state2的city1选项后，如果用户想要更改为state3选项，则state3 cities list select将为空，因为该值设置为state2 city值，如何删除此值，以便当用户更改为另一个状态时，city select元素将具有默认值（没有设置值）？

如果我的解释有点不清楚，我很抱歉。无论如何这里是更清晰图片的代码。 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脚本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);
});

这就是我想要的过程：

用户选择类别，州和城市并搜索
页面返回结果，状态和城市选择具有搜索值（如果用户想要选择其他类别，用户不需要重新选择州和城市）。
但是如果用户想要选择另一个州的另一个城市，当用户更改另一个州时，城市选择应该显示该选择元素中第一个选项的值，因为现在如果用户更改状态，它将显示城市列表选择该元素但使用空白，而不是选择的第一个选项。

我尝试过使用removeattr（'selected'），prop（'selected'，false），但仍然无法让城市选择在状态发生变化时显示第一个选项。对不起凌乱的解释和代码。所有关于实现我需要的建议都非常受欢迎。 Thx提前

Answer 1

使用ajax解决此问题

Three interlinked dropdown

PHP Ajax Country State City Drop Down

Demo of linked drop down list by using Ajax & PHP

Answer 2

尝试以下代码 -

注意 - 您无需多次使用document.ready。使用一次并将所有脚本代码放入其中。

$(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

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

2 个答案: