jquery - さまざまな動的コンボボックスを処理する方法は？

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つのコンボボックスに同じ「効果」を持たせるにはどうすればよいですか？

乾杯。

score 1 · Accepted Answer

on関数でマルチセレクターを使用できます。

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

複製された要素が一意のIDを持ち、dat_index...iがその値を増やしたことを確認します

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

これがフィドルです

score 1 · Accepted Answer

要素のクローンもそのプロパティのクローンを作成し、コードにいくつかの変更を加えました。それらをチェックして、私が何を変更したかを確認してください:)私はそれらを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>

ワーキングフィドル

score 0 · Accepted Answer

クラスセレクターで関数を呼び出しており、選択ボックスの両方のクラスが異なるため、次のいずれかを試すことができます。

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

score 0 · Accepted Answer

クラス名と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/

jquery - さまざまな動的コンボボックスを処理する方法は？

4 に答える 4

Related

Reference