Question

HTML

<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>
</ul>

JQuery

<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 didn’t works ..Why so??

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

Answer 1

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.