3

私は1つのコンボボックスを作成しているこの作業コードを持っています：

あなたはそれがここで働いているのを見ることができます：jsfiddle

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

これにより、コンボボックスに入力するたびに、次のコンボボックスが開かれます。

1つのコンボボックスのみ

これを実現するためにそのコードを変更するにはどうすればよいですか？これは、2つのコンボボックスが開くことを意味します（スタイルを忘れてください）

これは、2つのコンボボックス効果を意味します

ありがとうございました。

4

2 に答える 2

1

コンボボックスの数を2倍にしたい場合は、forループを使用して、カウンター変数の値に応じて値を設定できます。

于 2012-12-26T18:01:55.407 に答える
1

selectあなたの意図が完全にはわかりませんが、2つの要素のグループを作成し、ユーザーが値を選択したときに新しいグループを追加したいようです。

その場合、次selectのfieldsetように2つをグループ化することをお勧めします。

<fieldset>
  <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="2">
    <option></option>
    <option val="Opt1">Opt1</option>
    <option val="Opt2">Opt2</option>
    <option val="Opt3">Opt3</option>
  </select>
</fieldset>

次に、その親fieldsetを検索して、次のようにクローンを作成します。

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

  var fieldset = $(this).parents('fieldset');

  if ($(this).find('option').size() > 2) {
    var newFieldset = fieldset.clone();
    var newComboBox = $(fieldset).children('.combo:first');
    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(newFieldset);
    }
  }     
});​

おそらくあなたがそれを必要とする方法と正確に一致しないいくつかの詳細がありますが、一般的にこれは私がお勧めするアプローチです。

ここで更新されたフィドルを見つけます：http：//jsfiddle.net/JaVVe/8/

于 2012-12-26T22:08:26.050 に答える