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>

我想要的是，
我选择一个国家名称第二省根据国家关系改为基于db的表格 3我选择省，然后城市下拉的价值变成了与数据库中的省表有关的城市 4我将提交所有这些以在db

中找到一些东西

那么我应该用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
        }
      });
    });
});

Answer 2

首先向您的省id和您所在的城市select添加select

<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返回正确的数据。你也可以从中找出如何做这些城市

Answer 3

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

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/

Answer 4

为此必须使用.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/

Answer 5

只使用这两行，它的工作非常完美。

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

使用JQuery＆amp ;;在表单中选择另一个下拉列表时更改下拉列表值ajax的帖子

5 个答案: