如何使用 jQuery 动态更改固定选定框的值

Question

我有 3 个选择框。每个选择框的值都必须动态变化。

我想根据第一个选择框更改第二个和第三个选择框的值。 用 jQuery 简单的方法修复。

Commerce->English
Arts->Gujarati
science->French

Commerce->IP    
Arts->Computer
Science->java

请在此处查看 html http://jsfiddle.net/j2pCJ/1/

这是 2 盒样品，我想要 3 盒 http://jsfiddle.net/sabithpocker/fRuhn/

JQUERY 代码在这里

$("#select1").change(function() { 
if($(this).data('options') == undefined){
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options',$('#select2 option').clone());
    } 
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});

Answer 1

我不敢相信你想要的是这样的简单：

var secondSelect = $("select[name='2ndbox']");
var thirdSelect = $("select[name='3rdbox']");
var secondOptions = secondSelect.children('option');
var thirdOptions = thirdSelect.children('option');

$("select[name='1stbox']").change(function(){     
  var selectedIndex = this.selectedIndex;
  secondOptions.filter(function(i){ return i == selectedIndex})
               .appendTo(secondSelect.empty());
  thirdOptions.filter(function(i){ return i == selectedIndex})
              .appendTo(thirdSelect.empty());
}).change();

Demo.

请注意，使用filter 只是实现它的一般方法，在您的特定情况下，看起来我们可以像这样使用.eq() 方法：

secondOptions.eq(selectedIndex).appendTo(secondSelect.empty());