0

私は以下のコードを持っています:

<select name="picker" id="picker">
    <option value="solution 1">solution 1</option>
    <option value="solution 2">solution 2</option>
</select>

<select name="option_loader" id="option_loader">
</select>

私が欲しいもの:

「ソリューション 1」を選択すると、「option_loader」は下の最初の 4 つのオプションを表示し、ユーザーが「ソリューション 2」を選択すると、「option_loader」は下の最後の 4 つのオプションを置き換えて表示します。

<option value="22oxcas0vrrnhji">22oxcas0vrrnhji</option>
<option value="4mx91psjki">4mx91psjki</option>
<option value="sxlwoprc03nm">sxlwoprc03nm</option>
<option value="gfjiopu23rdio">gfjiopu23rdio</option>


<option value="su3o2ppc">su3o2ppc</option>
<option value="234niovfsd">234niovfsd</option>
<option value="se08fi9jvonaa">se08fi9jvonaa</option>
<option value="asldkj3i09">asldkj3i09</option>

どうもありがとう

4

3 に答える 3

2

最初のドロップダウンで、onchangeイベントを使用して 2 番目のドロップダウン値を更新できます。

たとえば、デモはhttp://jsfiddle.net/muthkum/Cb9D7/1/です。

例はあなたのselect値を使用しています。いくつかのアイデアを得ることができれば幸いです。

$('#picker').change(function(){
    switch($(this).val()){
      case 'solution 1':
         $('#option_loader').html('<option value="22oxcas0vrrnhji">22oxcas0vrrnhji</option><option value="4mx91psjki">4mx91psjki</option><option value="sxlwoprc03nm">sxlwoprc03nm</option><option value="gfjiopu23rdio">gfjiopu23rdio</option>');
         break;
      case 'solution 2':
         $('#option_loader').html('<option value="su3o2ppc">su3o2ppc</option><option value="234niovfsd">234niovfsd</option><option value="se08fi9jvonaa">se08fi9jvonaa</option><option value="asldkj3i09">asldkj3i09</option>');
         break;        
    }        
})

$('#picker').change();//automatically call to change the initial selection
于 2012-09-26T05:36:54.333 に答える
1 
var opt = ['<option value="22oxcas0vrrnhji">22oxcas0vrrnhji</option><option value="4mx91psjki">4mx91psjki</option><option value="sxlwoprc03nm">sxlwoprc03nm</option><option value="gfjiopu23rdio">gfjiopu23rdio</option>', '<option value="su3o2ppc">su3o2ppc</option><option value="234niovfsd">234niovfsd</option><option value="se08fi9jvonaa">se08fi9jvonaa</option><option value="asldkj3i09">asldkj3i09</option>']

$('#picker').change(function(){
    $('#option_loader').html(opt[this.selectedIndex])
}).change()

http://jsfiddle.net/B8znC/

于 2012-09-26T05:40:25.757 に答える
0

このフィドルをチェック

$(function() {
    PopulateDropDown();
    $('#picker').on('change' , function() {
         PopulateDropDown();
    });
});

function PopulateDropDown(){
    var val = $('#picker').val();
    $('#option_loader').empty().append( $('.' + val).html());
}

    <select name="picker" id="picker">
   <option value="solution1">solution 1</option>
   <option value="solution2">solution 2</option>
</select>
<select name="option_loader" id="option_loader">
</select>
<div class="options">
   <div class="solution1">
      <option value="22oxcas0vrrnhji">22oxcas0vrrnhji</option>
      <option value="4mx91psjki">4mx91psjki</option>
      <option value="sxlwoprc03nm">sxlwoprc03nm</option>
      <option value="gfjiopu23rdio">gfjiopu23rdio</option>
   </div>
   <div class="solution2">
      <option value="su3o2ppc">su3o2ppc</option>
      <option value="234niovfsd">234niovfsd</option>
      <option value="se08fi9jvonaa">se08fi9jvonaa</option>
      <option value="asldkj3i09">asldkj3i09</option>
   </div>
</div>

</p>

</p>

于 2012-09-26T05:39:40.457 に答える