JavaScript switch語句是否可以包含document.ready .append函數？

Question

我的頁面上有兩個選擇字段。 在第一個選項的內部，可以選擇三個不同的選項（類別）。 我想使第二個依賴於第一個，因此，例如，如果您在第一個選擇字段中選擇“ category1”，則第二個應顯示在該類別下可用的不同選擇選項。

這是我正在努力的方向，但是沒有用：

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