title: Jquery Conditional dropdown in a Mobile App
body: <p>I'm integrating a conditional drop down using Jquery however I'm having some issues.</p>
  
  <ol>
  <li>I need the default value on = 1.</li>
  <li>When opening different pages of the mobile app and then returning to home page the drop down doesn't work until you exit the app and then open it again.</li>
  </ol>
  
  <p>The code.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
    &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  
    &lt;style type="text/css"&gt;
      #selMethod {
          display: none;
      }
      .header {
          background-color: #ff0000;
          padding: 5px 10px;
          font-weight: bold;
          margin-bottom: 10px;
      }
    &lt;/style&gt;
  
    &lt;title&gt;&lt;/title&gt;
  &lt;script type='text/javascript'&gt;
  $(window).load(function(){
      $("select").change(function () {
      var str = "";
  
      str = parseInt($("select option:selected").val());
  
          if(str == 1){
            $("#selMethod").show();
            $("#sel0").show();
          } else if(str &gt;= 1){
           $("#selMethod").show();
           for(var i = 0; i &lt; 4; i++)
               $("#sel" + i).hide();
           str = str - 1;
  
           $("#sel" + str).show();
          }
        else
            $("#selMethod").hide();
  });
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="homeop"&gt;
      &lt;label for="main"&gt;Choose An Option: &lt;span class="req"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;select class="cat_dropdown" id="cat_dropdown" name="cat_dropdown"&gt;
          &lt;option value="0"&gt;-- Please select --&lt;/option&gt;
          &lt;option value="1" selected&gt;Search By Address&lt;/option&gt;
          &lt;option value="2"&gt;Restaurant Name&lt;/option&gt;
          &lt;option value="3"&gt;Cuisine&lt;/option&gt;
          &lt;option value="4"&gt;Food&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  
  &lt;div id="selMethod"&gt;
      &lt;div id="selOptions"&gt;
          &lt;div id="selInfo"&gt;
              &lt;div id="sel0" class="homeselinfo"&gt;
                     &lt;h4 class="trn" data-trn-key="enter_your_location"&gt;Enter your location&lt;/h4&gt;
  
                     &lt;section class="field-section"&gt;
                       &lt;input id="s" value="" type="text" class="text-input text-input--underbar trn" ng-model="text" placeholder="Street Address,City,State" data-trn-key="home_search_placeholder" 
                       style="display: block; width: 100%"&gt;
                     &lt;/section&gt;
  
                     &lt;div class="padtop25"&gt;
                     &lt;button class="button button--quiet green" onclick="getCurrentLocation();"&gt;
                     &lt;ons-icon icon="fa-location-arrow"&gt;&lt;/ons-icon&gt;
                     &lt;span class="trn" data-trn-key="use_my_location"&gt;Use my current location&lt;/span&gt;
                     &lt;/button&gt;       
                     &lt;/div&gt;
  
                      &lt;button class="button green-btn button--large" onclick="searchMerchant();"&gt;
                        &lt;span class="trn" data-trn-key="search_restaurant"&gt;Search Restaurant&lt;/span&gt;             
                        &lt;div class="search-btn"&gt;&lt;ons-icon icon="fa-chevron-right"&gt;&lt;/ons-icon&gt;&lt;/div&gt;
                     &lt;/button&gt;
              &lt;/div&gt;
  
              &lt;div id="sel1" class="homeselinfo"&gt;
  
                     &lt;h4 class="trn" data-trn-key="enter_your_location"&gt;Find Restaurant by Name&lt;/h4&gt;
  
                     &lt;section class="field-section"&gt;
                       &lt;input id="s" value="" type="text" class="text-input text-input--underbar trn" ng-model="text" placeholder="Restaurant Name" data-trn-key="home_search_placeholder" 
                       style="display: block; width: 100%"&gt;
                     &lt;/section&gt;
  
                      &lt;button class="button green-btn button--large" onclick="searchMerchant();"&gt;
                        &lt;span class="trn" data-trn-key="search_restaurant"&gt;Search Restaurant&lt;/span&gt;             
                        &lt;div class="search-btn"&gt;&lt;ons-icon icon="fa-chevron-right"&gt;&lt;/ons-icon&gt;&lt;/div&gt;
                     &lt;/button&gt;
  
              &lt;/div&gt;
  
              &lt;div id="sel2" class="homeselinfo"&gt;
                  &lt;p&gt;selMENT INFO OPTION 3&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div id="sel3" class="homeselinfo"&gt;
                  &lt;p&gt;selMENT INFO OPTION 3333&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>