jQuery依赖下拉框填充-如何 [英] Jquery dependent drop down boxes populate- how

问题描述

我有相关的下拉框，如下图所示.有人可以建议如何使用JQuery/Javascript获得结果吗?

I've got dependent drop down boxes as shown on scenario below. Could anyone please suggest how to achieve the result using JQuery/Javascript?

场景:

HH1:
    <select name="drop1">
      <option value="0">
      <option value="2">
      <option value="3">
      ......
      <option value="23">
    </select>

HH2:
    <select name="drop1">
      <option value="0">
      <option value="2">
      <option value="3">
      ......
      <option value="23">
    </select>

对不起，我忘了提一下正在通过javascript(for循环)填充选项的项目.我只需要知道如何根据HH1选定的值使HH2动态.

如果用户在选项HH1(小时)中选择3，我只想显示仅 3-0(其中0是24小时)，请选择HH2中的选项.我不想看1-2.

If the user selects 3 in option HH1(Hour) I would like to show only 3-0 (where 0 is 24 hour) select options in HH2. I don't want to see 1-2.

基本上，HH2取决于HH1中的选定值.这在JavaScript中可行吗?如果可以的话，请您告诉我如何?

Basically, HH2 is dependent on selected value in HH1 — is this possible in JavaScript? Could you please show me how, if possible?

推荐答案

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
});

这篇关于jQuery依赖下拉框填充-如何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！