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

Question

如何根据另一个下拉值更改下拉值？

我将有 3 个下拉值，如下所示:

<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">
                <option value="1">a province</option>
            </select>
        </div>

<div class="form-group col-lg-2">
            <label>city</label>
            <select name="city" class="form-control">
                <option value="1">a city</option>
            </select>
        </div> <input type="submit> </form>

我想要的是，
首先我选择一个国家/地区名称
第二个省份根据数据库表中的国家/地区关系更改为
第三，我选择省份，然后将城市下拉列表的值更改为与数据库中的省份表相关的城市
第四，我将提交所有这些以在数据库中查找某些内容

那么我应该如何使用 JQuery 和 Ajax 来检索值并更改下拉值？谢谢

Answer 1

所以基本上你需要先禁用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
        }
      });
    });
});