在页面中,创建一个可以多选的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(",")