jquery - 根据菜单选择的Jquery替换选项

Question

我有以下代码：

<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>

非常感谢

Answer 1

在第一个下拉列表中，onchange您可以使用事件更新第二个下拉列表值。

例如，这是一个演示，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

Answer 2

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/

Answer 3

检查这个小提琴

$(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>