2

html

 <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>

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);
    }
}
});

小提琴

此代码正在运行，并且每次填充之前的组合框时都会创建一个新的组合框。

我怎样才能每两个下拉菜单换行？像这样：

在此处输入图像描述

以及如何强制它始终填充偶数个组合框。例如。如果仅填充了 3 个组合框，则必须警告错误。

4

2 回答 2

2

这假设您将选择框放在仅包含选择框和 br 的容器中。（通过验证更新）

$('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);
        }
        $('body br').remove();
        $('body select:odd').after($('<br />'));
    } 

    validate();
});

function validate() {
    var count = $('body select[value!=""]').length;
    if (count > 0 && count % 2 == 0) 
        $('#ok').text('OK!');
    else
        $('#ok').text('Not an even number selected');
}

​</p>

http://jsfiddle.net/P5nV8/4/

于 2013-01-01T23:16:45.147 回答
1

看这个演示：http: //jsfiddle.net/JaVVe/15/

i = 2;
$('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);
            i++
            if (Math.floor(i/2) < +i/2){
            $('body').append('<hr />');
            }
        }
    } 
});​
于 2013-01-01T23:29:16.857 回答