填充基于选择的输入选项

-1

我试图找到创建大量输入菜单的最佳方法，该菜单将根据这些选择自动填充。我遇到的问题是有相当多的选择。将会有4个下拉菜单。每个下拉菜单将有2个选项。填充基于选择的输入选项

我在看下面的例子。虽然这种方法工作的代码量将是巨大的>> http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/

有谁知道实现这个最好的方法？

谢谢，

来源

2012-05-13 felix001

有多少“很多？ –

-1

这可以很容易地完成一些通用的帮助功能。

例如，不是为每个值手动提供原始HTML，您可以编写一个函数，根据传递的单个值清除并填充<select>元素。

准备工作中，您需要创建一个对象，其中包含第一个<select>的值作为第二个<select>列表的索引。像这样的东西 -

var beverages = { 
'wine' : ['Red','White'], 
'beer' : ['dark','pale'], 
'juice': ['mango','grapefruit'] 
};

现在我们知道，beverages['beer'][0]能给我们带来寒冷的一瓶啤酒。

从这里我们可以写一个更通用的功能，以帮助我们与HTML操作...

function populateSelect(category){ 
    // remove all existing options. 
    $("#secondSelection").find('option').remove(); 
    $.each(beverages[category],function(index,elem){ 
    // for each item in beverages[category], 
    // we add an option to the <select>. 
    $("#secondSelection").append('<option>'+elem+'</option>'); 
    }); 
}

你会调用该函数这样的 -

populateSelect($("#firstSelection").val());

的标记，你会必须有会是这样的 -

<select id="firstSelection"> 
    <option value='beer'>Beer</option> 
    <option value='wine'>Wine</option> 
    <option value='juice'>Juice</option> 
</select> 
<select id="secondSelection"> 
    <option>Choose a Category</option> 
</select>

对于更复杂的结构，例如您所描述的结构，您可以在原始对象中嵌套更多选项，并且它是数组...

来源

2012-05-13 18:41:12 Lix

感谢您的更新。但即时通讯只是试图全部测试，但jQuery似乎失败了。任何想法http://jsfiddle.net/Y3wa5/3/ – felix001

是的，我的代码有一个小小的错误。但看看[这]（http://jsfiddle.net/Y3wa5/10/） - 这就是你应该如何实现这一点。你仍然需要附加一个'.on（'change'）'listener ... – Lix

你应该考虑让你的第一个'

填充基于选择的输入选项

回答

相关问题