hiding and Showing the li in JQuery
<p>I am having the Html as</p>

<pre><code> &lt;ul&gt;
    &lt;li id="listSize" style="display: block;"&gt;
  &lt;label class="topspace"&gt;Field Size:&lt;/label&gt;

  &lt;select id="fieldSize" name="fieldSize" &gt;
       &lt;option &gt;Choose a size &lt;/option&gt;
       &lt;option value="small"&gt;Small&lt;/option&gt;
       &lt;option value="medium"&gt;Medium&lt;/option&gt;
       &lt;option value="large"&gt;Large&lt;/option&gt;
 &lt;/select&gt; 
&lt;/li&gt;
    &lt;li id="listPhoneFormat" class="right half" style="display: none;"&gt;
 &lt;label class="topspace"&gt;Phone Format&lt;/label&gt;
 &lt;select id="fieldSize" name="fieldSize"&gt;
 &lt;option selected="selected" value="phone" id="fieldPhoneAmerican"&gt;### - ### - ####&lt;/option&gt;
 &lt;option value="europhone" id="fieldPhoneEuro"&gt;International&lt;/option&gt;
 &lt;/select&gt;
&lt;/li&gt;
    &lt;li id="listOptions" style="display: none;"&gt;
           &lt;label class="topspace"&gt;Options:&lt;/label&gt;
           &lt;input id='required' name="required" type='checkbox'&gt;Required&lt;/input&gt;
    &lt;/li&gt;
&lt;li id="listInstructions" style="display: none;"&gt;
 &lt;label class="topspace"&gt;Instructions for User &lt;/label&gt;
 &lt;textarea cols="40" id="instructions" name="instructions" rows="20" style="width: 98%; height: 70px;"&gt;&lt;/textarea&gt;

&lt;/li&gt;
</code></pre>

<p></p>

<p>In my JQuery i am retriving the value of the Dropdown select by </p>

<pre><code>   &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
        $('#fieldSize').fieldValue();
 });
   &lt;/script&gt;
</code></pre>

<p>where i am using the Form plugin</p>

<p>it shows the correct value only i kept the li with id="listSize" as an first option 
And if i kept it below as the last li or in between it didnt works ..Why so??</p>

<p>Also How to make one li to display:none and display:block on some actions by JQuery???</p>
