当使用 JQuery 和 ajax post 在表单中选择另一个下拉列表时更改下拉列表值

所以基本上你需要先禁用select，除非是国家对吗？或者其他会使国家/地区字段首先选择的内容。

<form id="myForm">
    <div class="form-group col-lg-2">
        <label>Country</label>
        <select id="country" name="country" class="form-control">
            <option value="1">Japan</option>
            <option value="2">China</option>
            <option value="3">New Zealand</option>
        </select>
    </div>
    <div class="form-group col-lg-2">
        <label>province</label>
        <select name="province" class="form-control" disabled>
            <option value="1">a province</option>
        </select>
    </div>
    <div class="form-group col-lg-2">
        <label>city</label>
        <select name="city" class="form-control" disabled>
            <option value="1">a city</option>
        </select>
    </div>
    <input type="submit">
</form>

因为我不知道你的服务器响应是什么。我假设是这个

{"response": " <option selected value='"countryprovince1'">Selected Province1</option><option selected value='"countryprovince2'">Selected Province2</option><option selected value='"countryprovince3'">Selected Province3</option>"}

通过这种方式，我可以简单地使用 jQuery html()

    //Select country first
$('select[name="country"]').on('change', function() {
    var countryId = $(this).val();
    $.ajax({
        type: "POST",
        url: "get-province.php",
        data: {country : countryId },
        success: function (data) {
                    //remove disabled from province and change the options
                    $('select[name="province"]').prop("disabled", false);
                    $('select[name="province"]').html(data.response);
        }
    });
});

$('select[name="province"]').on('change', function() {
    var provinceId = $(this).val();
    $.ajax({
        type: "POST",
        url: "get-city.php",
        data: {province : provinceId },
        success: function (data) {
                    //remove disabled from city and change the options
                    $('select[name="city"]').prop("disabled", false);
                    $('select[name="city"]').html(data.response);
        }
    });
});
//once all field are set, submit
$('#myForm').submit(function () { 
    $.ajax({
        type: "POST",
        url: "find.php",
        data: $('#myForm').serialize(),
        success: function (data) {
                //success
        }
      });
    });
});

省select和城市select添加一个id

<form method="post" action="find.pgp">
    <div class="form-group col-lg-2">
        <label>Country</label>
        <select id="country" name="country" class="form-control">
            <option value="1">Japan</option>
            <option value="2">China</option>
            <option value="3">New Zealand</option>
        </select>
    </div>
    <div class="form-group col-lg-2">
        <label>province</label>
        <select name="province" class="form-control" id="province">
        </select>
    </div>
    <div class="form-group col-lg-2">
        <label>city</label>
        <select name="city" class="form-control" id="select"></select>
    </div>
    <input type="submit">
</form>

然后，假设你已经在页面上设置了jQuery：

<script>
    $(function(){
        // event called when the country select is changed
        $("#country").change(function(){
            // get the currently selected country ID
            var countryId = $(this).val();
            $.ajax({
                // make the ajax call to our server and pass the country ID as a GET variable
                url: "get_provinces.php?country_id=" + countryId,
            }).done(function(data) {
                // our ajax call is finished, we have the data returned from the server in a var called data
                data = JSON.parse(data);
                // loop through our returned data and add an option to the select for each province returned
                $.each(data, function(i, item) {
                    $('#province').append($('<option>', {value:i, text:item}));
                });
            });
        });
    });
</script>

以及您正在使用 ajax 调用的get_provinces.php脚本：

<?php
    /// we can access the country id with $_GET['country_id'];
    // here you can query your database to get the provinces for this country id and put them in an array called $provinces where the key is the id and the value is the province name
    // this is a dummy array of provinces, you will replace this with the data from your database query
    $provinces = array(6=>"Province One",54=>"Province Two",128=>"Province Three");
    echo json_encode($provinces);
?>

这是基本思想。您显然需要更改get_provinces.php来查询数据库并使用国家/地区 ID 返回正确的数据。您也可以从中找出如何做城市

请查看本教程。 它肯定会帮助你。

http://www.php-dev-zone.com/2013/10/country-state-city-dropdown-using-ajax.html

或者这个。

http://www.techsofttutorials.com/ajax-country-state-city-dropdown-using-phpmysql/

为此，您必须使用 .change（） 事件处理程序

    $(document).ready(function() {
    $('.form-group col-lg-2').change(function() {
    var $select = $(this).val();
    // here you can apply condition on $select to apply different scenarios.

     });
   });

这只是一个想法。您可以查看在线提供的不同示例。请查看以下网页以了解数据库的此功能。

https://css-tricks.com/dynamic-dropdowns/

只使用这两行，它就完美地工作了。

jQuery('#select_selector').change(function(){
  jQuery("#select_selector1 option").eq(jQuery(this).find(':selected').index()).prop('selected',true);
});