1

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 个组合框有相同的“效果”？

干杯。

4

4 回答 4

1

您可以在on功能中使用多选器..

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

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

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

这是小提琴

于 2013-01-02T11:32:45.360 回答
1

克隆元素也克隆了它的属性，我在你的代码中做了一些改变！检查它们，看看我有什么改变 :) 我将它们包装在一个 div 和其他一些东西中！

查询：

$('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>

工作 小提琴

于 2013-01-02T11:33:48.820 回答
0

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

<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);
        }
    }
    });​
于 2013-01-02T11:18:34.793 回答
0

类名和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);
    }
}
});

演示：http: //jsfiddle.net/2zNRu/1/

于 2013-01-02T11:20:35.113 回答