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

I can’t duplicate/use the same code for 2 different comboboxes, it seems to cause some kind of trouble.

How can I have the same “effect” for 2 comboboxes?

Cheers.

Answer 1

Cloning elements also clone its properties and I have made some changes in your code! check them and see what i have changed 🙂 I wrapped them in a div and some more things!

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