Question

如何填充选择下拉列表，其值取决于父下拉列表中选择的内容。 E-g，First下拉列表中包含国家/地区名称，在选择时，下一个下拉列表将加载在第一个下拉列表中选择的该国家/地区的相应状态。然后说我有第三个下拉列表，我将该特定状态的图像与第二个下拉列表中选择的内容相对应。

如何在JQuery中完成此操作。

E-g

国家＆GT;＆GT;＆GT;＆GT;＆GT;状态＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;状态地图

Answer 1

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

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

或者你可以看到

的答案

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

Answer 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'
});

玩得开心！：）

（对不起我的英文：“＆gt;）

Answer 3

看看这个插件：cascade 对于每个州，您可以使用适当的背景图像显示那些标记的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>

根据其他其他选择下拉列表填充选择下拉列表

3 个答案: