Question

我的页面上有两个选择字段。在第一个内部有三个不同的选项（类别），您可以从中选择一个。我要做的第二个依赖于第一个，所以如果你选择＆＃34; category1＆＃34;在第一个选择字段中，第二个字段应显示在该一个类别下可用的不同选择选项。

这是我正在研究的方向，但它不起作用：

 Choose category:<br>
 <select name="category" id="category">
 <option name="category1" >category1</option>
 <option name="category2" >category2</option>
 <option name="category3" >category3</option>
 </select>
 <br>
 Choose between options:<br>
 <select name="option" id="option" onclick="chooseOne()"></select>
 <br><br>

 function chooseOne(){
     var category=document.getElementbyId("category");
     var selection=category.options[category.selectedIndex].text;

 switch (selection){
     case "Category 1":
         $(document).ready(function() {
         $("#secondSelectField").append("<option>Choose first</option>",
                 "<option>Choose secont</option>",
                 "<option>Choose third</option>",
                 "<option>Choose fourth</option>",
                 "<option>Choose fifth</option>");  
         });
         break;

     case "Category 2":
         $(document).ready(function() {
        $("#secondSelectField").append("<option>Choose sixth</option>",
                 "<option>Choose seventh</option>",
                 "<option>Choose eight</option>",
                 "<option>Choose nineth</option>",
                  "<option>Choose tenth</option>"); 
          });
          break;

      case "Category 3":
          $(document).ready(function() {
          $("#secondSelectField").append("<option>Choose eleventh</option>",
                  "<option>Choose tvelfth</option>",
                  "<option>Choose 13</option>",
                  "<option>Choose 14</option>",
                  "<option>Choose 15</option>",
                  "<option>ETC...</option>");   
          });
          break;

      default:
          $(document).ready(function(){
          $("#secondSelectField").append("Nothing selected");
      }

有人可以告诉我这是否是解决此问题的合法方式。如果是这样，需要在代码中修复哪些内容才能使其正常工作。

如果这种方法完全错误，有人可以告诉我如何做对吗？

Answer 1

虽然不是最佳，但是这可行。

当你调用$(document).ready(callback)时，如果已经触发了文档就绪事件，则会立即执行给定的回调。

但您的代码存在一些问题：

首次选择中的文字和值为category1，您将其与Category 1进行比较
$("#secondSelectField")但第二个选择的ID为option

更好的方法是在文档准备就绪时将函数绑定到事件：

$(document).ready(function() {

    // listen to the click on the select with ID 'option'
    $('select#option').on('click', function () {
        switch ($(this).val()){
            case "Category 1":
                $("#secondSelectField").append("<option>Choose first</option>",
                        "<option>Choose secont</option>",
                        "<option>Choose third</option>",
                        "<option>Choose fourth</option>",
                        "<option>Choose fifth</option>");
                break;

            case "Category 2":
                $("#secondSelectField").append("<option>Choose sixth</option>",
                        "<option>Choose seventh</option>",
                        "<option>Choose eight</option>",
                        "<option>Choose nineth</option>",
                        "<option>Choose tenth</option>");
                break;

            case "Category 3":
                $("#secondSelectField").append("<option>Choose eleventh</option>",
                        "<option>Choose tvelfth</option>",
                        "<option>Choose 13</option>",
                        "<option>Choose 14</option>",
                        "<option>Choose 15</option>",
                        "<option>ETC...</option>");
                break;

            default:
                $("#secondSelectField").append("Nothing selected");
        }
    });

});

Answer 2

您不需要/想要在$(document).ready()

中包装所有内容

您甚至不需要switch声明。您可以通过使用数字系统来确定要放在哪里的选项号来提高效率。

HTML

<select name="category" id="category">
    <option name="category1" value="1">Option 1</option>
    <option name="category2" value="2">Option 2</option>
    <option name="category3" value="3">Option 3</option>
    <option name="category4" value="4">Option 4</option>
    <option name="category5" value="5">Option 5</option>
</select>

的jQuery

$(document).on('change', '#category', function(){
    //Multiple for category options
    var optMultiple = 5;
    var html = "";
    var select = $('<select id='secondOption>');

    //get the starting and ending number for the series. If you store your option values in
    //an array you can use this to pull the values from the array in the addOption() function

    var startNum = ( ($(this).val()-1) * optMultiple ) + 1;   
    var endNum = (startNum - 1) + optMultiple;

    html = addOption(startNum, endNum);

    $('#secondOption').replaceWith(select.append(html));
    //replace the current second option select box with the new one
});

var addOption = function(startNum, endNum) {
    var html = '';
    for(var i = startNum; i <= endNum; i++){
        html += '<option value="' + i + "' + '>';
        html += 'Choose ' + i;
        html += '</option>';
    }
    return html;
}

JavaScript switch语句是否可以包含document.ready .append函数？

2 个答案:

HTML

的jQuery