hiding and Showing the li in JQuery

Question

Hi,

I am having the Html as

 <ul>
    <li id="listSize" style="display: block;">
  <label class="topspace">Field Size:</label>

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

</li>

In my JQuery i am retriving the value of the Dropdown select by

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

where i am using the Form plugin

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??

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

Answer 1

You can read the selected value with:

$("#fieldSize").val()

(Form plug-in not requiered for this).

You can hide/show elements using the hide and show methods.

Answer 2

You have two DOM elements with the id fieldSize (one presumably refering to listSize, the other refering to listPhoneFormat). You should rename those so that each id is unique, otherwise you'll never know for sure which DOM element you are retrieving.

Once the id fieldSize is unique, you can retrieve the value for a form element with the id fieldSize like this:

var fieldSizeVal = $("#fieldSize").val();

Of course, this will work for any id that maps to a form element.

Hiding and showing you can do like this:

$("#fieldSize").show(); // show the DOM element with id fieldSize
$("#fieldSize").hide(); // hide the DOM element with id fieldSize

These functions work for any DOM element or set of DOM elements, not just for form elements.