依赖于Jquery的下拉框填充 – 如何

我有依赖的下拉框，如下面的场景所示。 任何人都可以建议如何使用JQuery / Javascript实现结果？

场景：

HH1:     ......   HH2:     ......   

编辑：对不起，我忘了提到通过javascript（for循环）填充选项。 我只需要知道如何根据HH1选择值使HH2动态化。

如果用户在选项HH1（小时）中选择3，我想在HH2中仅显示3-0（其中0是24小时）选项。 我不想看1-2。

基本上，HH2依赖于HH1中的选定值 – 这在JavaScript中是否可行？ 如果可能的话，请你告诉我怎么样？

Answer 1

 var drop2 = $("select[name=drop2] option"); // the collection of initial options $("select[name=drop1]").change(function(){ var drop1selected = parseInt(this.value); //get drop1 's selected value $("select[name=drop2]") .html(drop2) //reset dropdown list .find('option').filter(function(){ return parseInt(this.value) < drop1selected; //get all option with value < drop1's selected value }).remove(); // remove }); 

http://jsfiddle.net/HTEkw/

Answer 2

简短的回答是，可以在JavaScript / Jquery中使用。

您可以这样做，在全新的HTML5 data- *属性中定义您的依赖项:-)

像这样的HTML：

 HH1:  00 02 03 23  HH2:  00 02 03 23  

和Javascript（JQuery）这样：

 $('select[name="drop1"]').change(function () { var ar = $('select[name="drop1"] option:selected').attr('data-shown').split(','); $('select[name="drop2"] option').each(function(){ $(this).toggle(false); for(var i = 0; i <= ar.length; i++){ if($(this).attr('value') == ar[i]){ $(this).toggle(true); } } });}).trigger('change'); 

这应该做你想要的下降。

根据您在评论中添加的条件，它更容易：

 $('select[name="drop1"]').change(function () { var number = parseInt($('option:selected', this).attr('value')); $('select[name="drop2"] option').each(function(){ $(this).toggle(parseInt($(this).attr('value')) >= number); }); }).trigger('change'); 

Answer 3

/ 这是JavaScript代码 /

 function fndroplist(listindex) { $("#ddlCity").options.length(""); switch (listindex) { case "Karnataka": $("#ddlCity").options[0] = new Option("--select--", ""); $("#ddlCity").options[1] = new Option("Dharawad", "Dharawad"); $("#ddlCity").options[2] = new Option("Haveri", "Haveri"); $("#ddlCity").options[3] = new Option("Belgum", "Belgum"); $("#ddlCity").options[4] = new Option("Bijapur", "Bijapur"); break; case "Tamilnadu": $("#ddlCity").options[0] = new Option("--select--", ""); $("#ddlCity").options[1] = new Option("Chennai", "Chennai"); $("#ddlCity").options[2] = new Option("Vijayada", "Vijayada"); break; } }   
 
  City:  --Select--  *   
 
 
 
  Country: