http://jsfiddle.net/HTEkw/

Question

我有依赖的下拉框，如下面的场景所示。任何人都可以建议如何使用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。

基本上，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:
<select name="drop1">
    <option value="0" data-shown="0,2">00</option>
  <option value="2" data-shown="2,3">02</option>
  <option value="3" data-shown="3,23">03</option>
  <option value="23" data-shown="23,0">23</option>
</select>

HH2:
<select name="drop2">
  <option value="0">00</option>
  <option value="2">02</option>
  <option value="3">03</option>
  <option value="23">23</option>
</select>

和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;
        }
    }
    </script>



<body>
        <div>
            <p>
                <label id="lblCt">
                    City:</label>
                <select id="ddlCity" style="width: 142px;">
                    <option>--Select--</option>
                </select>
                <span class="red">*</span>
                <label id="lblCity" style="color:Red; font-size:small;">
                </label>
            </p>
        </div>
        <div>
            <p>
                <label>
                    Country:</label>
                <input type="text" id="txtCountry" />
                <label id="lblCountry" style="color:Red; font-size:small;">
                </label>
            </p>
        </div>
</body>

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

3 个答案:

http://jsfiddle.net/HTEkw/