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中，我正在通过

重新选择Dropdown select的值

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

我正在使用Form插件

它显示正确的值只有我保持li与id =“listSize”作为第一选项如果我把它保持在最后一层或它之间它没有用。为什么呢？

另外如何使一个li显示：none和display：阻止JQuery的一些动作

Answer 1

你有两个带有id fieldSize的DOM元素（一个可能是引用listSize，另一个是引用listPhoneFormat）。您应该重命名这些ID，以便每个id都是唯一的，否则您将无法确定要检索的DOM元素。

一旦id fieldSize是唯一的，你可以像这样检索id为fieldSize的表单元素的值：

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

当然，这适用于任何映射到表单元素的id。

隐藏和显示你可以这样做：

$("#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方法隐藏/显示元素。

在JQuery中隐藏和显示li

2 个答案: