Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I'm going to assume you're not asking to <em>minify</em>, but to <em>minimize</em> your code and make it more efficient. And since you say you have lots of data, and your option shows 8 choices while your code only deals with 2, I'm going to show you a way to handle your option selection easily.</p> <p>(This assumes you can change the HTML. If you can't, please make that clear.)</p> <p>First, add a common class to all the uls you want to deal with, and add a data attribute matching the option value</p> <pre><code>&lt;ul id="finance" class="dropDownOption" data-optionValue="2"&gt; &lt;li&gt;Financial Institution &amp; Services&lt;/li&gt; &lt;li&gt;International Financial Management&lt;/li&gt; &lt;li&gt;Working Capital Management&lt;/li&gt; &lt;li&gt;Project Work&lt;/li&gt; &lt;/ul&gt; &lt;ul id="HR" class="dropDownOption" data-optionValue="3"&gt; &lt;li&gt;Financial Institution &amp; Services HR&lt;/li&gt; &lt;li&gt;International Financial Management&lt;/li&gt; &lt;li&gt;Working Capital Management&lt;/li&gt; &lt;li&gt;Project Work&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Then your <code>slz.change</code> function becomes <em>much</em> easier and more robust:</p> <pre><code>slz.change(function () { $(".dropDownOption").hide(); $("ul[data-optionValue='" + this.value + "']").show(); } </code></pre> <p>Without modifying your markup, you can do some things, but they're riskier. <em>With the markup you've shown</em>, it's safe to just use <code>$("ul").hide()</code>, though if you haven't shown us all of it, that could be dangerous. For handling the value to the id, you would need a conversion function:</p> <pre><code>function convertValueToId(value) { switch (value) { case 1: return; // empty return, since this one is the "unselected" case case 2: return "finance"; case 3: return "HR"; // etc } } slz.change(function() { $("ul").hide(); var id = convertValueToId(this.value); if (id) { $("#" + id).show(); } } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload