如何使用jQuery动态添加combobox

我有这个工作代码创建一个combobox：

你可以看到它在这里工作： jsfiddle

$('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); } } }); 

这导致了这种情况，每当我填充combobox时，下一个打开。

如何更改代码才能拥有此代码？ 这意味着两个combobox打开（请忘记风格 ）

谢谢。

Answer 1

我不完全确定你的意图，但似乎你想拥有两个select元素的组，然后在用户选择一个值时添加一个新组。

在这种情况下，我建议将两个select分组在一个select集中，如下所示：

 
   Opt1 Opt2 Opt3    Opt1 Opt2 Opt3   

然后查找该父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); } } });​ 

有一些细节可能不完全是你需要它的方式，但总的来说这是我推荐的方法。

在这里找到更新的小提琴： http ： //jsfiddle.net/JaVVe/8/

Answer 2

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