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

Posted 2023-05-08

【中文标题】如何使用 jquery json 和 php 更改多个下拉列表

【英文标题】：How to change Multiple dropdown with jquery json and php

【发布时间】：2016-11-26 06:29:51

【问题描述】：

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

<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/

【问题讨论】：

显示你的代码，到目前为止你尝试了什么？

你需要为此学习 ajax。

@Nikhil Vaghla 我确实写过任何代码。我不知道如何编写代码。它应该根据第一个选择选项进行更改。

请先尝试自己编写代码，然后提出问题。

@JBK：这不是“为我做那个”。自己学吧。有可用于 javascript 的优秀纪录片

【参考方案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。

【讨论】：

这里我没有使用 ajax 或任何数据库表。仅使用 javascript 或 jquery 进行更改以更改第一项。

@JBK 但是当前一个下拉列表更改时，您需要检索数据以填充到每个下拉列表中，您可以使用具有每个国家/州的所有默认值的 JS 数组

好的，谢谢您的建议和代码。但是这里不能使用ajax还有其他解决方案吗。

我们可以用数组还是json代替ajax

@JBK 是的，你可以使用它，但它是静态数据，但你可以