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

フィドル

このコードは機能しており、前のコンボボックスがいっぱいになるたびに新しいコンボボックスを作成しています。

2つのドロップダウンごとに改行するにはどうすればよいですか? このような：

ここに画像の説明を入力

また、常に偶数のコンボボックスを強制的に埋めるにはどうすればよいですか。例えば。コンボボックスが 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 に答える