title: How to make dropdown list behave as a select for if/else purposes?
body: <p>I'm using a regular dependent selects, as in the code below:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id="select_ciudad"&gt;
  &lt;option&gt;Madrid&lt;/option&gt;
  &lt;option&gt;Barcelona&lt;/option&gt;
  
  
  &lt;select id="select_act"&gt;
  &lt;option&gt;A&lt;/option&gt;  
  &lt;option&gt;B&lt;/option&gt;  
  
  
  &lt;select id="select_act2" style="display:none"&gt;
  &lt;option&gt;1&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  
  &lt;/select&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$( document ).ready(function() {    
   $("#select_ciudad").change(function() {
    if ($("#select_ciudad").val()=="Madrid") {
      $("#select_act").show();
      $("#select_act2").hide(); 
      }
  
  else if ($("#select_ciudad").val()=="Barcelona") {
          $("#select_act2").show();
              $("#select_act").hide();
      };
  });
  </code></pre>
  
  <p>But now I don't want to use a select anymore and I'm substituting it by a css unordered list, doing something like:</p>
  
  <p>NEW HTML:</p>
  
  <pre><code>&lt;section class="main"&gt;
              &lt;div class="wrapper"&gt;
                  &lt;div id="dd" class="wrapper-dropdown"          tabindex="1"&gt;
                      &lt;span&gt;Ciudad&lt;/span&gt;
                      &lt;ul class="dropdown"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Madrid&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Barcelona&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              ​&lt;/div&gt;
          &lt;/section&gt;
  </code></pre>
  
  <p>And the thing is now I cannot make the JS work the same way to do something when I click on any of the options (list elements). Do someone knows how to do it?</p>