Jquery 相关的下拉框填充 - 如何

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，我想在 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:
<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>