如何使用 jquery json 和 php 更改多个下拉列表

Question

大家好，我想根据国家/地区和城市更改状态。

<label>Country:</label><br/>
        <select onchange="getval(this)">
        <option value="">Select Country</option>
        <option value="india">India</option>
        <option value="america">America</option>
        </select>


    <select name="" id="">
        <option value="">Select State</option>
        <option value="india">Orissa</option>
        <option value="india">Telangan</option>
        <option value="america">USA</option>
        <option value="america">California</option>
    </select>



<select name="" id="">
    <option value="">Select city</option>
    <option value="orissa">Nal</option>
    <option value="orissa">Mir</option>
    <option value="Telangan">Hyd</option>
    <option value="Telangan">Vija</option>
    <option value="america">KRK</option>
    <option value="america">MRK</option>
</select>


How to change state based on country. and afterthat change city based on state.
Thanks in advance.

我只想在下面的链接中看起来像这样。 http://demos.thesoftwareguy.in/multiple-dropdown-jquery-ajax-php/

Answer 1

你需要的东西很容易制作，你只需要在你的下拉列表中使用 Ajax 和 onChange 事件：

<select id="idCountries" onchange="updateStatesByCountry()">
    <option value="">Select Country</option>
    <option value="india">India</option>
    <option value="america">America</option>
</select>

<select id="idStates" onchange="updateCitiesByState()">
    <option value="">Select State</option>
    <option value="india">Orissa</option>
    <option value="india">Telangan</option>
    <option value="america">USA</option>
    <option value="america">California</option>
</select>

...

在您的 JS 代码中添加所需的功能：

function updateStatesByCountry(){
    console.log($('#idCountries').val());
    //Here add Ajax logic to load a new dropdown with all states of the current country

    //Your AJAX call should be something like this
    $.get('/getStatesByCountry?country='+ $('#idCountries option:selected').val(),    function(data){
        $('#idStates').empty();
        $('#idStates').append(data);
    });
});
}

//Same logic for the next dropdowns.

我强烈建议您在编写此代码之前阅读 AJAX。