скрытие и отображение li в JQuery

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>

В моем JQuery я получаю значение выпадающего списка, выбранного на

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

где я использую плагин Form

показывает правильное значение только я сохранил li с id = "listSize" в качестве первой опции И если я держу его ниже как последний li или между ними, он не работает .. Почему так ??

Также Как сделать один li для отображения: none и display: block для некоторых действий JQuery ???

Answer 1

У вас есть два элемента DOM с идентификатором fieldSize (один предположительно ссылается на listSize, другой ссылается на listPhoneFormat). Вы должны переименовать их так, чтобы каждый идентификатор был уникальным, иначе вы никогда не узнаете наверняка, какой элемент DOM вы извлекаете.

Когда идентификатор fieldSize уникален, вы можете получить значение для элемента формы с идентификатором fieldSize следующим образом:

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

Конечно, это будет работать для любого идентификатора, который отображается на элемент формы.

Скрыть и показать, что вы можете сделать так:

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

Эти функции работают для любого элемента DOM или набора элементов DOM, а не только для элементов формы.

Answer 2

Вы можете прочитать выбранное значение с помощью:

$("#fieldSize").val()

(плагин формы для этого не требуется).

Вы можете скрыть / показать элементы, используя методы hide и show .