Question

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

我正在看下面的例子。虽然这种方法有效但代码量很大＆gt;＆gt; 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>

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

填充基于输入选项的选择

1 个答案: