jQuey常用选择器（二）

jQuery操作表单元素

最新推荐文章于 2024-10-31 15:39:18 发布

最新推荐文章于 2024-10-31 15:39:18 发布 · 121 阅读

文章标签：

#jQuery #JavaScript #HTML #ViewUI

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文展示了如何使用jQuery来操作HTML表单元素，包括改变文本框的值，选择多选框和下拉列表项。

以下内容均是来自《锋利的jQuery》，发到这里，纯属做个笔记，方便查阅。
直接看代码：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
      <title></title>
      <script type="text/javascript" src="jquery-1.3.1.js">
  
      </script>
  
     <script type="text/javascript">
         $().ready(
             function() {
 
                 //表单对象属性过滤选择器
                 //1改变表单内可用元素的值
                 //$('#form1 input:enabled').val("这里变化了");
 
                 //2改变表单内不可用元素的值
                 //$('#form1 input:disabled').val("这里变化了");
 
                 //3选取多选框中选中的个数
                 //alert($('#form1 input:checked').length);
 
                 //4选取下拉框中选中的内容
                 alert($('#form1 select :selected').length);
             }
         );
     </script>
 </head>
 <body>
     <form action="" id="form1">
         可用元素：<input name="add" value="可用文本框"/><br/>
         不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
         可用元素：<input name="che" value="可用文本框"/><br/>
         不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
 
         <br/>
        多选框：<br/>
         <input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
         <input type="checkbox" name="newsletter" value="test2"/>test2
         <input type="checkbox" name="newsletter" value="test3"/>test3
        <input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4
         <input type="checkbox" name="newsletter" value="test5"/>test5
 
         <div></div>
         <br/><br/>
         下拉列表:<br/>
         <select name="test" multiple="multiple" style="height:100px">
            <option>浙江</option>
             <option selected="selected">湖南</option>
             <option>北京</option>
             <option selected="selected">天津</option>
             <option>广州</option>
             <option>湖北</option>
        </select>
 
        <br/><br/>
         下拉列表2：<br/>
        <select name="test2">
            <option>浙江</option>
             <option>湖南</option>
            <option selected="selected">北京</option>
             <option>天津</option>
             <option>广州</option>
             <option>湖北</option>
        </select>
        <div></div>
     </form>
 </body>
 </html>