CODEWITHSUNDEEP
jquery
Mercy
Mercy

Reputation: 2271

hiding and Showing the li in JQuery

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

Upvotes: 0

Views: 4925

Answers (2)

dyve
dyve

Reputation: 6013

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.

Upvotes: 2

kgiannakakis
kgiannakakis

Reputation: 104168

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.

Upvotes: 0

Related Questions