title: How to show and hide div elements based on the selection of bootstrap dropdown in jQuery
body: <p>I have the following example
  <a href="http://jsfiddle.net/ahmedcom/5qu20yu6/" rel="nofollow">http://jsfiddle.net/ahmedcom/5qu20yu6/</a></p>
  
  <p>and it is working fine ,
  now how can change </p>
  
  <pre><code>&lt;select&gt;
      &lt;option&gt;orderby&lt;/option&gt;
      &lt;option id="select1"&gt;__1&lt;/option&gt;
      &lt;option id="select2"&gt;__2&lt;/option&gt;
      &lt;option id="select3"&gt;__3&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>to </p>
  
  <pre><code>&lt;div class="dropdown"&gt;
      &lt;button type="button" class="catby btn btn-sm dropdown-toggle" data-toggle="dropdown"&gt;
          &lt;i class="ion-android-apps"&gt;&lt;/i&gt;order by&lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="#" data-value="action" id="select1"&gt;__1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-value="another action" id="select2"&gt;__2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" data-value="something else here" id="select3"&gt;__3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What are the modifications that will be in JavaScript ?</p>