0

こんにちは、私の質問に答えてくれてありがとう。

2 つの select 要素を持つ div があります (これらは動的に作成され、ID がないことに注意してください)。両方とも同じオプション要素 (1 から 5 までのスキル レベル) が含まれています。ユーザーが SelectFrom ドロップボックスから何かを選択すると、2 番目のオプション (Select To) には、Select From で選択した値よりも大きな値を持つオプションのみが含まれます。

ユーザーが [選択元] ドロップボックス (値なし) で既定の要素を選択した場合、[選択先] に 5 つの要素を再設定します。

5 つのオプションすべてを含む非表示の select 要素を作成し、それらを複製して Select to dropbox を再設定することがわかりました。

前進する方法は何ですか。トリッキーな部分は、ID がないため、parent() と siblings() を使用していることです。御時間ありがとうございます

これが HTML であると仮定しましょう:

<div>
<select class="skillsFrom">
<option value="">Please select a value</option>
<option value="1">a</option>
<option value="2">a</option>
<option value="3">a</option>
<option value="4">a</option>
<option value="5">a</option>
</select>
<select class="skillsTo">
<option value="">Please select a value</option>
<option value="1">a</option>
<option value="2">a</option>
<option value="3">a</option>
<option value="4">a</option>
<option value="5">a</option>
</select>
</div>

ここに JS があります: //btw helperSelect は、他の 2 つのオプションと同じオプションを持つ選択で、非表示になっています。

('.skillsFrom').bind('change', function(){

            var $optionsSkillLevel = $('#helperSelect option').clone();

            var selectedValue = $(this).val();

            $(this).parent().siblings('.skillsTo').html($optionsSkillLevel);

            if(selectedValue != ''){

            }

        });

そして、私は立ち往生しています。ここから先に進む方法がわかりません。Select To のすべての要素を反復処理し、選択した値よりも低い要素を Select From から削除したい

4

2 に答える 2

1

最初の選択を変更するたびに、2番目の選択の特定のオプションを非表示/表示する必要があります。

$('.skillsFrom').change(function() {
    var theValue = $(this).val();
    if($(this).val()==="") {
        // show all values of .skillsTo if .skillsFrom select is set to ""
        $(this).parent().find('.skillsTo option').show();
    } else {
        theValue = parseInt(theValue, 10);
        $(this).parent().find('.skillsTo option').each(function() {
           if(parseInt($(this).val(), 10) <= theValue) {
               // hide if value <= selected value from .selectFrom
               $(this).hide();
           } else {
               // show if value > selected value from .selectFrom
               $(this).show();
           }
        });
    }
});
于 2012-09-27T09:22:38.147 に答える
0

次のように実行できます。

$('.skillsFrom').change(function() {
  var val = this.value;
  if(val == '') {
    // your reload logic here
  }
  else {
    $('.skillsTo option').hide().filter(function() {
        return this.value != '' && parseInt(this.value, 10) > parseInt(val, 10);
    }).show();
  }
});
于 2012-09-27T09:24:41.920 に答える