填充基于输入选项的选择

Question

我试图找到创建多个输入菜单的最佳方法，这些输入菜单将根据那里的选择自动填充。 我遇到的问题是有很多选择。将有 4 个下拉菜单。每个下拉菜单都有 2 个选项。

我正在查看以下示例。虽然这种方法有效，但代码量会很大>> http://devingredients.com/2011/05/populate-a-select-dropdown-list-with-jquery/

有谁知道实现这一目标的最佳方法？？

谢谢，

Answer 1

这可以通过一些通用的辅助函数轻松完成。

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

在准备过程中，您需要创建一个对象，其中包含第一个 <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>

---

对于像你描述的更复杂的结构，你可以在原始对象中嵌套更多选项，它是数组......