jQuery技术

jQuery通过val()方法设置或获取元素值

字号+ 作者: 来源: 2014-11-16 22:49 我要评论( )

在页面中,创建一个可以多选的Select标记,设置该标记的change时间,当按Ctrl键选择多项时,通过p标签将获取的选项值显示在页面中

另外,创建一个文本框元素,设置该文本框的change和focus事件,当文本框获得焦点时,清空文本框中的内容;当在文本框输入字符时,通过另外一个p标签将所获取的文本的值即时显示在页面中。

实现示例的jQuery代码:

<script>
 $(function() {
 $("select").change(function() {
 var sel = $("select").val().join(",")
 $("#p_1").html(sel);
 })
 $("input").change(function() {
 var text = $("input").val();
 $("#p_2").html(text);
 })
 $("input").focus(function() {
 $("input").val("");
 })
 })
</script>

实现示例的HTML代码:

<div>
 <select multiple="multiple">
 <option>项目一</option>
 <option>项目二</option>
 <option>项目三</option>
 <option>项目四</option>
 </select>
 <p id="p_1">……</p>
</div>
<div>
 <input type="text"/>
 <p id="p_2">……</p>
</div>

在jQuery中,如果获取元素的值,是通过val()方法实现的,其语法格式如下:

val(val)

其中,如果不带参数val,则是获取某元素的值;反之则是将参数val的值赋给某元素,几设置元素的值。该方法常用于表单中获取或设置对象的值。

另外,通过val()方法还可以获取select标记中的多个选项值,其语法格式如下:

val().join(",")

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
<