title: Adding arguments in url to choose values in multiple drop downs on page using javascript/jquery
body: <p>I am trying to create a webpage where the content changes depending on which drop down options the user has selected. Once the user has made his first choice, the content of a drop down menu can be an additional nested drop down menu with another choice the user must make.</p>
  
  <p>I am now trying to figure out how I can pre-select options by passing parameters in the URL for both the first drop down and a number of nestet drop downs.</p>
  
  <p>I have the basic functionality down. Here's my HTML:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js_select.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js_drop.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="css.css"&gt;
  
  &lt;select id="select" class="div-toggle" data-target=".my-info-1"&gt;
      &lt;option id="one" value="noselection" data-show=".noselection"&gt;
          Choose option
      &lt;/option&gt;
      &lt;option id="two" value="2015" data-show=".2015"&gt;
          2015
      &lt;/option&gt;
      &lt;option id="three" value="2014" data-show=".2014"&gt;
          2014
      &lt;/option&gt;
   &lt;/select&gt;
  
  &lt;div class="my-info-1"&gt;
      &lt;div class="noselection hide"&gt;
          No choice made
      &lt;/div&gt;
  
      &lt;div class="2015 hide"&gt;
          2015        
      &lt;/div&gt;
  
      &lt;div class="2014 hide"&gt;
  
          A nested drop down within the 2014 selection:&lt;br&gt;&lt;br&gt;
  
              &lt;select id="select" class="div-toggle" data-target=".my-info-2"&gt;
                  &lt;option id="one" value="noselection2" data-show=".noselection2"&gt;
                      Choose option
                  &lt;/option&gt;
                  &lt;option id="two" value="s1" data-show=".s1"&gt;
                      January
                  &lt;/option&gt;
                  &lt;option id="three" value="s2" data-show=".s2"&gt;
                      February
                  &lt;/option&gt;
              &lt;/select&gt;
  
              &lt;div class="my-info-2"&gt;
                  &lt;div class="noselection2 hide"&gt;
                      No choice made
                  &lt;/div&gt;
                  &lt;div class="s1 hide"&gt;
                      Information about January   
                  &lt;/div&gt;
                  &lt;div class="s2 hide"&gt;
                      Information about February
                  &lt;/div&gt;
              &lt;/div&gt;  
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my css.css:</p>
  
  <pre><code>.hide {
    display: none;
  }
  </code></pre>
  
  <p>And here's js_drop.js that makes content appear depending on the user selection. I found the script here: <a href="https://stackoverflow.com/questions/6164507/change-the-content-of-a-div-based-on-selection-from-drop-down-menu">Change the content of a div based on selection from dropdown menu</a>:</p>
  
  <pre><code>$(document).on('change', '.div-toggle', function() {
    var target = $(this).data('target');
    var show = $("option:selected", this).data('show');
    $(target).children().addClass('hide');
    $(show).removeClass('hide');
  });
  $(document).ready(function(){
      $('.div-toggle').trigger('change');
  });
  </code></pre>
  
  <p>I am now adding functionality to make it possible to link to a specific drop down selection and any nested selections by adding parameters to the URL, like in:</p>
  
  <pre><code>http://example.com/page.html?select=three&amp;selectnested=two
  </code></pre>
  
  <p>I am using js_select.js for this function. I found the code here: <a href="https://stackoverflow.com/questions/25207583/how-to-create-a-hyperlink-that-directs-to-a-page-with-pre-selected-option-in-a-d">How to create a hyperlink that directs to a page with pre-selected option in a drop-down menu?</a></p>
  
  <pre><code>$(document).ready(function() {
    var select = GetUrlParameter("select");
    $("#" + select).attr("selected", "");
  });
  
  function GetUrlParameter(name) {
      var value;
      $.each(window.location.search.slice(1).split("&amp;"), function (i, kvp) {
          var values = kvp.split("=");
          if (name === values[0]) {
              value = values[1] ? values[1] : values[0];
              return false;
          }
      });
      return value;
  }
  </code></pre>
  
  <p>My guess at a solution would be to:</p>
  
  <ul>
  <li>Change id on my second <code>&lt;select&gt;</code> to id="selectnested"</li>
  <li>Add the following code to my js_select.js above the function</li>
  </ul>
  
  <p>The code:</p>
  
  <pre><code>$(document).ready(function() {
    var select = GetUrlParameter("selectnested");
    $("#" + select).attr("selected", "");
  });
  </code></pre>
  
  <p>But this solution does not choose a selection with-in the nested drop down when the page loads using my example URL above.</p>
  
  <p>Any hint on solving this would be much appreciated.</p>