Question

HTML

<div id="opts" class="styled-select">
 <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>
</div>



<div id="opts2" class="styled-select">
  <select id="combo2" class="combo2" data-index="1">
            <option></option>
            <option val="Opt11">Opt11</option>
            <option val="Opt22">Opt22</option>
            <option val="Opt32">Opt33</option>
        </select>
 </div>

的jQuery

$('#opts').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();
            $('#opts').append(newComboBox);
        }
    }
});

我不能为2个不同的组合框复制/使用相同的代码，这似乎会造成某种麻烦。

如何为2个组合框提供相同的“效果”？

干杯。

Answer 1

您可以在on函数中使用多重选择器。

$('body').on('change', '.combo,.combo2', function() {

确保您的克隆元素具有唯一ID，并且dat_index ... i增加了它的值

var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10) + 1; //here

这是fiddle

Answer 2

克隆元素也克隆了它的属性，我在代码中做了一些更改！检查它们，看看我有什么变化:)我把它们包裹在一个div中，还有更多东西！

Jquery的：

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

    if ($(this).find('option').size() > 2) {
        var newComboBox = $(this).clone();
        var thisComboBoxIndex = $(this).attr('id').replace("combo", "");
        var newComboBoxIndex = thisComboBoxIndex + 10;

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

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

HTML：

    <div class="1">
    <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>
</div>
<br>
<div class="2">
    <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>
</div>

Working Fiddle

Answer 3

因为您在类选择器上调用函数，并且选择框的两个类都不同，所以您可以尝试以下之一，

<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="1">
            <option></option>
            <option val="Opt11">Opt11</option>
            <option val="Opt22">Opt22</option>
            <option val="Opt32">Opt33</option>
        </select>

$('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').on('change', '.combo,.combo2', 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);
        }
    }
    });

Answer 4

类名和Id的设置是问题。

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

if ($(this).find('option').size() > 2) {
    var newComboBox = $(this).clone();
    //I incremented the index so the new element would have a unique id and class
    var thisComboBoxIndex = parseInt($(this).attr('data-index')) + 1;
    var newComboBoxIndex = thisComboBoxIndex + 1;

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

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

DEMO ：http://jsfiddle.net/2zNRu/1/

如何处理不同的动态组合框？

4 个答案: