masquage et d'affichage de la li JQuery

Question

J'ai la Html comme

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

Dans mon JQuery je suis retriving la valeur de la liste déroulante sélectionnez par

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

où je suis en utilisant le plugin Form

il montre la valeur correcte seulement j'ai gardé le li avec id = "listSize" comme une première option Et si je l'ai gardé ci-dessous comme le dernier li ou entre il n'a pas fonctionné .. Pourquoi?

Aussi Comment faire un li pour afficher: aucun et afficher: bloquer sur certaines actions par JQuery ???

Answer 1

Vous avez deux éléments DOM avec l'id fieldSize (l'un se référant vraisemblablement à listSize, l'autre se référant à listPhoneFormat). Vous devriez les renommer afin que chaque identifiant soit unique, sinon vous ne saurez jamais avec certitude quel élément DOM vous récupérez.

Une fois que le FieldSize id est unique, vous pouvez récupérer la valeur d'un élément de forme avec l'identifiant FieldSize comme ceci:

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

Bien sûr, cela fonctionnera pour tout id qui correspond à un élément de formulaire.

Hiding et vous montrer pouvez faire comme ceci:

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

Ces fonctions fonctionnent pour tout élément DOM ou ensemble d'éléments DOM, non seulement pour les éléments de formulaire.

Answer 2

Vous pouvez lire la valeur sélectionnée avec:

$("#fieldSize").val() 

(plug-in pour non exigée ce formulaire).

Vous pouvez masquer/afficher des éléments à l'aide des méthodes hide et show.