我有这个正在创建的工作代码one组合框:
你可以在这里看到它的工作原理: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);
}
}
});
这导致了这样的结果,每次我填充一个组合框时,都会打开下一个组合框。
![one combobox only](https://i.stack.imgur.com/OWLIf.png)
我怎样才能改变该代码以获得这个?这意味着打开两个组合框(请忘记style)
![Which means two comboboxes effect](https://i.stack.imgur.com/MBcLO.png)
谢谢。
我不完全确定你的意图,但似乎你想要两人一组select
元素,然后当用户选择一个值时添加一个新组。
在这种情况下,我建议将你们两个分组select
s in a fieldset
像这样:
<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>
然后查找那个父母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);
}
}
});
有些细节可能并不完全符合您的需要,但总的来说,这是我推荐的方法。
在这里找到更新的 Fiddle:http://jsfiddle.net/JaVVe/8/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)