title: Show/Hide <select> dropdown, with jQuery, based on value
body: <p>I'm trying to build a custom dropdownlist which show/hide a second set of dropdowns based on it's selection.</p>
  <p>I was wondering if anyone here might be able to help with a solution to this.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var i = 0;
  $(document).ready(function() {
    var bindClickToToggle = function(element) {
      element.click(function() {
        $(this).parents('.dropdown').find('dd ul').toggle();
      });
    };
  
    var bindClickToUpdateSelect = function(element) {
      element.click(function() {
        var text = element.html();
        var value = element.find('span.value').html();
        var dropdown = element.parents('.dropdown');
        var select = $(dropdown.attr('target'));
        dropdown.children('dt').find('a').html(text);
        dropdown.find('dd ul').hide();
        select.attr('value', value);
      });
    };
  
    var getItemHtml = function(element) {
      return '&lt;dt&gt;&lt;a href="#"&gt;' + element.text() + '&lt;span class="value"&gt;' + element.attr('value') + '&lt;/span&gt;&lt;/a&gt;&lt;/dt&gt;';
    };
  
    var getDropdownHtml = function(id, target) {
      return '&lt;dl id="target' + id + '" class="dropdown" target="#' + target.attr('id') + '"&gt;&lt;/dl&gt;';
    };
  
    var getEnclosingHtml = function() {
      return '&lt;dd&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/dd&gt;';
    };
  
    var createDropDown = function(element, appendTo) {
      var selected = element.find('option[selected]');
      var options = element.find('option');
      appendTo.append(getDropdownHtml(i, element));
      var target = appendTo.find('#target' + i);
      target.append(getItemHtml(selected));
      target.append(getEnclosingHtml());
      var appendOptionsTo = target.find('ul');
      options.each(function() {
        appendOptionsTo.append(getItemHtml($(this)));
      });
      appendOptionsTo.find('a').each(function() {
        bindClickToUpdateSelect($(this));
      });
      i++;
    };
  
    $('select').each(function() {
      createDropDown($(this), $('body'));
    });
    $('a').each(function() {
      bindClickToToggle($(this));
      $(this).click(function() {
        $(this).parents('ul').hide();
      });
    });
  
    $(document).bind('click', function(e) {
      var $clicked = $(e.target);
      if (!$clicked.parents().hasClass("dropdown")) {
        $(".dropdown dd ul").hide();
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 0.75em;
    color: #000;
  }
  
  .desc {
    color: #6b6b6b;
  }
  
  .desc a {
    color: #0092dd;
  }
  
  .dropdown dd,
  .dropdown dt,
  .dropdown ul {
    margin: 0px;
    padding: 0px;
  }
  
  .dropdown dd {
    position: relative;
  }
  
  .dropdown a,
  .dropdown a:visited {
    color: #816c5b;
    text-decoration: none;
    outline: none;
  }
  
  .dropdown a:hover {
    color: #5d4617;
  }
  
  .dropdown dt a:hover {
    color: #5d4617;
    border: 1px solid #d0c9af;
  }
  
  .dropdown dt a {
    background: #e4dfcb url(arrow.png) no-repeat scroll right center;
    display: block;
    padding-right: 20px;
    border: 1px solid #d4ca9a;
    width: 160px;
    padding: 5px;
  }
  
  .dropdown dt a span {
    cursor: pointer;
    display: block;
  }
  
  .dropdown dd ul {
    background: #e4dfcb none repeat scroll 0 0;
    border: 1px solid #d4ca9a;
    color: #C5C0B0;
    display: none;
    left: 0px;
    padding: 5px 0px;
    position: absolute;
    top: 2px;
    width: auto;
    min-width: 170px;
    list-style: none;
  }
  
  .dropdown span.value {
    display: none;
  }
  
  .dropdown dd ul li a {
    padding: 5px;
    display: block;
  }
  
  .dropdown dd ul li a:hover {
    background-color: #d0c9af;
  }
  
  .dropdown img.flag {
    border: none;
    vertical-align: middle;
    margin-left: 10px;
  }
  
  .flagvisibility {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p class="desc"&gt;The control down here is a dropdown made with CSS and jQuery. It is bound to SELECT element on the page which isn't hidden intentionally.&lt;/p&gt;
  &lt;div id="log"&gt;&lt;/div&gt;
  &lt;select id="source"&gt;
    &lt;option selected="selected" value="BR"&gt;Brasil&lt;/option&gt;
    &lt;option value="FR"&gt;France&lt;/option&gt;
    &lt;option value="DE"&gt;Germany&lt;/option&gt;
    &lt;option value="IN"&gt;India&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="source2a"&gt;
    &lt;option selected="selected" value="BR"&gt;Cities in France&lt;/option&gt;
    &lt;option value="FR"&gt;France City 1&lt;/option&gt;
    &lt;option value="DE"&gt;France City 2&lt;/option&gt;
    &lt;option value="IN"&gt;France City 3&lt;/option&gt;
    &lt;option value="JP"&gt;France City 4&lt;/option&gt;
    &lt;option value="RS"&gt;France City 5&lt;/option&gt;
    &lt;option value="UK"&gt;France City 6&lt;/option&gt;
    &lt;option value="US"&gt;France City 7&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="source2b"&gt;
    &lt;option selected="selected" value="BR"&gt;Cities in Germany&lt;/option&gt;
    &lt;option value="FR"&gt;Germany City 1&lt;/option&gt;
    &lt;option value="DE"&gt;Germany City 2&lt;/option&gt;
    &lt;option value="IN"&gt;Germany City 3&lt;/option&gt;
    &lt;option value="JP"&gt;Germany City 4&lt;/option&gt;
    &lt;option value="RS"&gt;Germany City 5&lt;/option&gt;
    &lt;option value="UK"&gt;Germany City 6&lt;/option&gt;
    &lt;option value="US"&gt;Germany City 7&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="source2c"&gt;
    &lt;option selected="selected" value="BR"&gt;Cities in India&lt;/option&gt;
    &lt;option value="FR"&gt;India City 1&lt;/option&gt;
    &lt;option value="DE"&gt;India City 2&lt;/option&gt;
    &lt;option value="IN"&gt;India City 3&lt;/option&gt;
    &lt;option value="JP"&gt;India City 4&lt;/option&gt;
    &lt;option value="RS"&gt;India City 5&lt;/option&gt;
    &lt;option value="UK"&gt;India City 6&lt;/option&gt;
    &lt;option value="US"&gt;India City 7&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>