如何根据另一个菜单将下拉菜单返回到默认选项？答案

【问题标题】：How to return dropdown menu to the default option based upon another menu?如何根据另一个菜单将下拉菜单返回到默认选项？
【发布时间】：2013-05-15 21:28:22
【问题描述】：

我在 PHP 中使用 AJAX 构建了国家和城市下拉菜单。他们工作正常。但问题是我想如果选择任何国家，然后选择选项“please select"城市选项也返回"please select"

如何修改 ajax 代码来做到这一点？

<script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){   
        $('#country').change(function(){ //any select change on the dropdown with id country trigger this code        
            $("#cities > option").remove(); //first of all clear select items
            var country_id = $('#country').val();  // here we are taking country id of the selected one.
            $.ajax({
                type: "POST",
                url: "get_cities/"+country_id, //here we are calling our user controller and get_cities method with the country_id

                success: function(cities) //we're calling the response json array 'cities'
                {
                    $.each(cities,function(id,city) //here we're doing a foeach loop round each city with id as the key and city as the value
                    {
                        var opt = $('<option />'); // here we're creating a new select option with for each city
                        opt.val(id);
                        opt.text(city);
                        $('#cities').append(opt); //here we will append these new select options to a dropdown with the id 'cities'
                    });
                }

            });

        });
    });
    // ]]>
</script>

//下拉选择菜单

<label for="country">Country: </label>
<select id="country" name="country_id">
    <option selected="selected" value="#">Please Select</option>
    <?php foreach ($countries as $country) { ?>
        <option value="<?= $country['id'] ?>"><?= $country['country_name'] ?></option>

    <?php } ?>
</select>

<label for="city">City: </label>
<select id="cities" name="city_id">
    <option selected="selected" value="#">Please Select</option>
    <?php foreach ($cities as $city) { ?>
        <option value="<?= $city['id'] ?>"><?= $city['city_name'] ?></option>
    <?php } ?>
</select>

【问题讨论】：

标签： php ajax jquery

【解决方案1】：

如果选择的选项是please select，则不要继续使用 ajax 和清除城市选项。

$('#country').change(function(){ 
   var country_id = $(this).val();
   if(country_id === '#') return; // return if selected country option is default.

     // and rest of the code
    $("#cities > option").remove();

});

【讨论】：

【解决方案2】：

我猜想在您使用 Ajax 检索的城市列表中，您将“请选择”选项作为第一个城市。否则，您应该使用 Id 值 0 添加它。这样，如果用户触发提交而不选择城市，您可以轻松过滤。

那么，回答你的问题。

<script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){   
        $('#country').change(function(){ //any select change on the dropdown with id country trigger this code        
            $("#cities > option").remove(); //first of all clear select items
            var country_id = $('#country').val();  // here we are taking country id of the selected one.
            $.ajax({
                type: "POST",
                url: "get_cities/"+country_id, //here we are calling our user controller and get_cities method with the country_id

                success: function(cities) //we're calling the response json array 'cities'
                {
                    $.each(cities,function(id,city) //here we're doing a foeach loop round each city with id as the key and city as the value
                    {
                        var opt = $('<option />'); // here we're creating a new select option with for each city
                        opt.val(id);
                        opt.text(city);
                        $('#cities').append(opt); //here we will append these new select options to a dropdown with the id 'cities'});
                        **$("#cities option:first").attr('selected','selected');**
                }

            });

        });
    });
    // ]]>
</script>

您是在告诉 select 将第一个选项设置为 select。

希望这会有所帮助！

【讨论】：