Is it possible for a JavaScript switch statement to include document.ready .append function?

Question

I have two select fields on a my page. Inside of the first one are three different options(categories) of which you can select one. The second one I want to make dependant on the first one, so if for instance you select "category1" in the first select field, the second one should display different select options available under that one category.

This is the direction I am working on but it doesn't work:

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

Can someone please tell me if this is a legitimate way of approaching this problem. If so, what needs to be fixed in the code in order for it to be working.

If this approach is completely wrong, can someone please advise me on how to do it right?

Answer 1

While not optimal, yes this would work.

when you call $(document).ready(callback) the given callback will be immediately executed if the document ready event has already been fired.

Your code has some problems however:

• the text and value in your first select is category1 and you are comparing it to Category 1
• $("#secondSelectField") but the second select's id is option

A better way would be to bind a function to the event when the document is ready:

$(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

You don't need / want to wrap everything in $(document).ready()

You also don't even need a switch statement. You can make this more efficient by using a numbers system to figure out what option numbers to put where.

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