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

【问题标题】：populate a select dropdown on the basis of other other select dropdown在其他其他选择下拉列表的基础上填充选择下拉列表
【发布时间】：2011-10-18 19:42:58
【问题描述】：

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

如何在 JQuery 中做到这一点。

E-g

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

有一个插件可以做到这一点

http://code.google.com/p/jqueryselectcombo/

或者你可以看看

的答案

How can I populate another dropdown with the onChange event of the first dropdown?

【讨论】：

没有插件就不行
可能但不太优雅的解决方案。请看清楚我给出的问题链接的答案。

【解决方案2】：

对于第一个下拉“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'
});

玩得开心！ :)

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

【讨论】：

【解决方案3】：

看看这个插件：cascade 您可以为每个状态设置几个 css 类，这些标志要使用适当的背景图像显示，并在第二个下拉更改事件中切换类：

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>

【讨论】：