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

Html

我不能为两个不同的组合框复制/使用相同的代码，这似乎会造成一些麻烦

2个组合框如何具有相同的“效果”

---

干杯。

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

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

---

类名和Id的设置是问题所在

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

---

演示：

您可以在功能的中使用MultiSelect

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

为了确保克隆的元素具有唯一的id和dat_索引…我增加了它的值

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

---

这是克隆元素，也克隆了它的属性，我对你的代码做了一些修改！检查一下，看看我改变了什么：）我把它们包在一个div里，还有更多的东西

Jquery：

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

HTML:

Opt1
Opt2
Opt3


Opt1
Opt2
Opt3

​

---

您是否尝试过在第二次选择中使用

class=“combo”

？是的，但不起作用。你也可以在这里尝试：那么你到底想要实现什么呢？我看到元素被克隆和附加了谢谢，对不起，我更新了代码，你能检查一下吗？这是我的方法对吗？上面的答案是100%有效的，但你必须检查我使用的方法，并澄清自己：）：DUpdate：我在脚本中发现了一个bug，现在正在调试它。很抱歉：D关于“清理”的内容选项？你想在选择新选项时清除以前的选项吗？找到了，伙计，坐下来获取我的代码：P，它将比你更好我挑战：D你今天随时都可以获取代码，你将获得notif！

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

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

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

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