Javascript 在其他选择下拉列表的基础上填充选择下拉列表

如何填充选择下拉列表，其值取决于父下拉列表中选择的内容。例如，第一个下拉列表中有国家名称，选择后，下一个下拉列表将加载在第一个下拉列表中选择的该国家的相应州。然后假设我有第三个下拉列表，我在其中放置特定状态的图像，对应于第二个下拉列表中选择的内容

如何在JQuery中实现这一点

E-g

---

国家>>>>>>>州>>>>>>该州地图

有一个插件可以实现这一点

或者你可以看到这个问题的答案

对于第一个下拉菜单“onChange”事件，您应该调用一个ajax函数，该函数将返回第二个下拉菜单项数组（…或其他内容）。当ajax调用完成时，您只需要附加结果项

伪：

$select1.change(function(){
  caountry_id = select1.find(':selected').val();
  $.get( // ajax call
    'path/to/script',  // php script, this will return the states
    {country: country_id},
    function(data){  // callback function
       $.each(data, function(key, value){   // iterate trough the items
           $select2.       // append nem options
              append($("<option></option>").
              attr("value",key).
              text(value));
       });
    },
    'json'
});

$select1.change（函数（）{
caCountry_id=select1.find（':selected'）.val（）；
$.get（//ajax调用
'path/to/script'，//php脚本，这将返回状态
{国家：国家id}，
函数（数据）{//回调函数
$.each（数据、函数（键、值）{//通过项进行迭代
$select2//附加nem选项
追加（$（“”）。
属性（“值”，键）。
文本（值）；
});
},
“json”
});

玩得开心！：）

（对不起我的英语：“>）

看看这个插件： 对于每个状态，您可以有几个css类，这些状态是您希望在第二个下拉更改事件中使用适当的背景图像和swith类显示的标志：

var statesList = [
    {
    'When': 'US',
    'Value': 'nope',
    'Text': 'Select state'},
{
    'When': 'US',
    'Value': 'US_AL',
    'Text': 'Alabama'},

{
    'When': 'US',
    'Value': 'US_AK',
    'Text': 'Alaska'},
{
    'When': 'IN',
    'Value': 'nope',
    'Text': 'Select state'},
{
    'When': 'IN',
    'Value': 'IN_AP',
    'Text': 'Andra Pradesh'},

{
    'When': 'IN',
    'Value': 'IN_AS',
    'Text': 'Assam'}
];

$("#state").cascade("#country", {
    list: statesList,
    template: function(item) {
        return "<option value='" + item.Value + "'>" + item.Text + "</option>";
    },
    match: function(selectedValue) {
        return this.When == selectedValue;
    }
});

$("#state").change(function() {
    $("#flag").removeClass().addClass($(this).val());
});

<label>Country
    <select id="country">
        <option value="nope">Choose a country</option>
        <option value="US">United States</option>
        <option value="IN">India</option>
    </select>
</label>

<label>State
    <select id="state">
        <option value='nope'>Select a country before</option>
    </select>
</label>

<span id="flag" style="border: 1px solid #000; padding: 1px;">
</span>

var statesList=[
{
'何时'：'我们'，
'值'：'不'，
“文本”：“选择状态”}，
{
'何时'：'我们'，
“值”：“US_AL”，
“文本”：“阿拉巴马州”}，
{
'何时'：'我们'，
“值”：“US_AK”，
“文本”：“阿拉斯加”}，
{
‘When’：‘IN’，
'值'：'不'，
“文本”：“选择状态”}，
{
‘When’：‘IN’，
“值”：“IN_AP”，
“文本”：“安德拉邦”}，
{
‘When’：‘IN’，
“Value”：“IN_AS”，
“文本”：“阿萨姆”}
];
$（“#州”）.cascade（“国家”{
列表：州列表，
模板：功能（项目）{
返回“+item.Text+”；
},
匹配：函数（selectedValue）{
返回此值。When==selectedValue；
}
});
$（“#状态”）.change（函数（）{
$（“#flag”）.removeClass（）.addClass（$（this.val（））；
});
国家
选择一个国家
美国
印度
陈述
选择之前的国家/地区

如果没有一个可插拔但不太优雅的解决方案，这是不可能的。请看清楚我在回答问题时给出的问题链接的答案。