Javascript 如何使用jQuery动态添加组合框

我有一个正在创建一个组合框的工作代码：

您可以看到它在这里工作：

$('body').on('change', '.combo', function() {
    var selectedValue = $(this).val();

    if ($(this).find('option').size() > 2) {
        var newComboBox = $(this).clone();
        var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
        var newComboBoxIndex = thisComboBoxIndex + 1;

        $('.parentCombo' + thisComboBoxIndex).remove();

        if (selectedValue !== '') {
            newComboBox.attr('data-index', newComboBoxIndex);
            newComboBox.attr('id', 'combo' + newComboBoxIndex);
            newComboBox.addClass('parentCombo' + thisComboBoxIndex);
            newComboBox.find('option[val="' + selectedValue + '"]').remove();
            $('body').append(newComboBox);
        }
    }
});

每次我填充一个组合框，下一个就会打开

我如何更改该代码以使其具有此功能？这意味着两个组合框打开（请忘记样式）

---

谢谢。

如果您只想将组合框的数量增加一倍，可以使用for循环，并根据计数器变量的值设置它们的值。

我不完全确定您的意图，但是，您似乎希望有两个

选择
元素的组，然后在用户选择值时添加一个新组

在这种情况下，我建议将您的两个
分组，在
字段集中选择
s，如下所示：

<fieldset>
  <select id="combo1" class="combo" data-index="1">
    <option></option>
    <option val="Opt1">Opt1</option>
    <option val="Opt2">Opt2</option>
    <option val="Opt3">Opt3</option>
  </select>
  <select id="combo2" class="combo" data-index="2">
    <option></option>
    <option val="Opt1">Opt1</option>
    <option val="Opt2">Opt2</option>
    <option val="Opt3">Opt3</option>
  </select>
</fieldset>

$('body').on('change', '.combo', function() {
  var selectedValue = $(this).val();

  var fieldset = $(this).parents('fieldset');

  if ($(this).find('option').size() > 2) {
    var newFieldset = fieldset.clone();
    var newComboBox = $(fieldset).children('.combo:first');
    var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
    var newComboBoxIndex = thisComboBoxIndex + 1;

    $('.parentCombo' + thisComboBoxIndex).remove();

    if (selectedValue !== '') {
        newComboBox.attr('data-index', newComboBoxIndex);
        newComboBox.attr('id', 'combo' + newComboBoxIndex);
        newComboBox.addClass('parentCombo' + thisComboBoxIndex);
        newComboBox.find('option[val="' + selectedValue + '"]').remove();
        $('body').append(newFieldset);
    }
  }     
});​

有些细节可能并不完全符合您的需要，但总的来说，这是我推荐的方法

在这里找到更新的小提琴：
你的方法有点偏离了我的想法。如果你在小提琴上演奏一点，它看起来很混乱。我想说的是，每次组合框被填充时，都会打开两个组合框。正如你所看到的，我让它工作了，但只是为了一个组合：你可以忘记每次打开一个新的组合框时内容都会被过滤的事实。我的回答/提琴显示了一种打开
select
s集合的方法：将它们分组到
字段集中。当您在一个
select
s中选择一个值时，它会打开一个附加组。请注意，HTML没有（内置）组合框，它们是简单的
select
控件。组合框将下拉列表与编辑控件组合在一起，现在通常与“自动完成”关联。如果您对代码有其他问题，我很乐意回答。只需在此处提问或更新您的原始问题。好的，使用您的小提琴，为什么有时选项在选中时保持空白？这是因为您的一些原始代码我没有更新（最里面的
if
）。如果我删除该选项，则行为会变得简单得多：