[JQ权威指南]第七天：使用val()方法设置和获取元素的值

本示例展示了如何使用jQuery实现一个带有多选功能的下拉菜单，并在选择项目时更新页面上的显示文本。同时，示例还包含了一个文本框，用于演示在获得焦点时清空内容及实时显示文本的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面中，创建一个可以多选的select标记，设置该标记的change事件，当按Ctrl键选择多项时，通过p标记将获取的选项值显示在页面中；另外，创建一个文本框元素，设置该文本框的change和focus事件，当文本框获得焦点时候，清空文本框的内容；当在文本框输入字符时，通过另外一个p标记获取文本的值即时显示页面中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取或设置元素的值</title>
    <script type="text/javascript" src="../jquery-2.1.4.js">
    </script>
    <style  type="text/css">
        body{ font-size:12px; text-align:center;}
        div{ padding:3px; margin:3px;width;120px;float:left;}
        .txt{ border:#666 1px solid; padding:3px;}
    </style>
    <script type="text/javascript">
        $(function(){
                $("select").change(function(){
                    var strSel =$("select").val().join(",");
                    $("#p1").html(strSel);
                })
                $("input").change(function(){
                    var strText =$("input").val();
                    $("#p2").html(strText);
                })
                $("input").change(function(){
                    $("#p2").val("");
                })      
            })
    </script>
</head>
<body>
    <div>
        <select multiple="multiple"  style="height:96px; width:85px;">
            <option value="1">Item 1</option>
            <option value="2">Item 2</option>
            <option value="3">Item 3</option>
            <option value="4">Item 4</option>
            <option value="5">Item 5</option>
        </select>
        <p id="p1"></p>
        <div>
            <input  type="text" class="txt"/>
             <p id="p2"></p>
        </div>
    </div>
</body>
</html>