How to initialize my dependent selectboxes and get their active values ?

Discussion in 'jQuery' started by mooiman, Oct 17, 2014.

0
  1. #1
    I was searching the internet for dependent select boxes, but I couldn't find what I was looking for (Most examples were using ajax calls or plugins [​IMG] ). So I decided to build me one myself.

    My script displays a selectbox named Fruit, if the user selects Apple or Orange, a second selectbox will appear (named Topping1 or Topping2, it depends on the fruit they have chosen). And finally if Sugar is selected within the Topping2 selectbox a third selectbox will appear, named "Child".

    It does work.. but there is a small error in it:
    When the selectbox is initialised and Apple is selected, the second selectbox won't appear. I know I can solve this with adding "Select a value" within the selectbox, but that's not what I want.

    Also I would like to know how I can retrieve the values of all three active selectboxes when the user is done with selecting.

    My coding:
    <html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        $('#Fruit').change(function(){
        $('#Topping1').hide();
        $('#Topping2').hide();
        $('#child').hide();
        var chosen=this.value;
            if (chosen == 'Apple'){$('#Topping1').toggle();   }
            if (chosen == 'Orange'){$('#Topping2').toggle();   }
        });
       
         $('#Topping2').change(function(){
         $('#child').hide();
         var chosenchild=this.value;
            if (chosenchild == 'Sugar2'){$('#child').toggle();   }
         });
       
    });
</script>
</head>
<body>
    <select id="Fruit" name="user_state">
                <optgroup label="state">
                    <option value="Apple" Selected>Apple</option>
                    <option value="Banana">Banana</option>
                    <option value="Orange">Orange</option>
                </optgroup>
             </select>
       <select id="Topping1" style="display:none;">
                    <option value="BSugar1">Brown Sugar</option>
                    <option value="Cinnamon1">Cinnamon</option>
                    <option value="Sugar1">Sugar</option>
                    <option value="Syrup1">Syrup</option>
       </select>       
       <select id="Topping2" style="display:none;">
                    <option value="Cinnamon2">Cinnamon</option>
                    <option value="Sugar2">Sugar</option>

       </select>   
       <select id="child" style="display:none;">
                    <option value="test">test</option>

       </select>                 
</body>
</html>
    Code (markup):
     
    mooiman, Oct 17, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Here you go:
    
<!DOCTYPE html>
  <html>
  <head>
  <style type="text/css">
  .hidden {
  display: none;
  }
  </style>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
   
  $(function() {
   
  if ($('#fruit').val() == 'Apple') {
  $('#topping2, #child').addClass('hidden');
  $('#topping1').removeClass('hidden');
  }
  if ($('#fruit').val() == 'Orange') {
  $('#topping1').addClass('hidden');
  $('#topping2').removeClass('hidden');   
  }
  if ($('#fruit').val() == 'Banana') {
  $('#topping1,#topping2,#child').addClass('hidden');
  }
   
  $('#fruit').change(function(){
  var chosen = $(this).val();
  if (chosen == 'Apple') {
  $('#topping2, #child').addClass('hidden');
  $('#topping1').removeClass('hidden');
  }
  if (chosen == 'Orange') {
  $('#topping1').addClass('hidden');
  $('#topping2').removeClass('hidden');
  }
  if (chosen == 'Banana') {
  $('#topping1,#topping2,#child').addClass('hidden');
  }
  });
   
  $('#topping2').change(function(){
  var chosen = $(this).val();
  if (chosen == 'Sugar2') {
  $('#child').removeClass('hidden');
  }
  });
  })
   
  });
  </script>
  </head>
  <body>
  <select id="fruit" name="user_state">
  <optgroup label="state">
  <option value="Apple" Selected>Apple</option>
  <option value="Banana">Banana</option>
  <option value="Orange">Orange</option>
  </optgroup>
  </select>
  <select id="topping1" class="hidden">
  <option value="BSugar1">Brown Sugar</option>
  <option value="Cinnamon1">Cinnamon</option>
  <option value="Sugar1">Sugar</option>
  <option value="Syrup1">Syrup</option>
  </select>   
  <select id="topping2" class="hidden">
  <option value="Cinnamon2">Cinnamon</option>
  <option value="Sugar2">Sugar</option>
   
  </select>  
  <select id="child" class="hidden">
  <option value="test">test</option>
  </select>   
  </body>
  </html>
    Code (markup):
    Added a HTML5 doctype, changed all the IDs to lowercase (camelcase and / or capitals in IDs and Classes should be avoided (basically, think XHTML and go from there (every element and attribute and value needs to be lower case).
     
    PoPSiCLe, Oct 17, 2014 IP