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

时间:2014-05-28 16:37:56

标签: javascript jquery html jquery-ui

我有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 CODE就在这里

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

1 个答案:

答案 0 :(得分: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());