jquery - 填充基于输入选项的选择

Question

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

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

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

谢谢，

Answer 1

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

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

在准备过程中，您需要创建一个对象，其中包含 first 的值<select>作为 second 列表的索引<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>

---

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