標籤:java ansi 元素 margin span font class center pre
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>擷取或設定元素的值</title> 5 <script type="text/javascript" 6 src="Jscript/jquery-1.8.2.min.js"> 7 </script> 8 <style type="text/css"> 9 body{font-size:12px;text-align:center}10 div{padding:3px;margin:3px;width:120px;float:left}11 .txt{border:#666 1px solid;padding:3px}12 </style>13 <script type="text/javascript">14 $(function() {15 $("select").change(function() { //設定下拉式清單方塊change事件16 var strSel = $("select").val().join(","); //擷取下拉式清單方塊所選中全部選項值17 $("#p1").html(strSel); //顯示下拉式清單方塊所選中全部選項值18 })19 $("input").change(function() { //設定文字框focus事件20 var strTxt = $("input").val(); //擷取文字框的值21 $("#p2").html(strTxt); //顯示文字框所輸入的值22 })23 $("input").focus(function() { //設定文字框focus事件24 $("input").val(""); //清空文字框的值25 })26 })27 </script>28 </head>29 <body>30 <div>31 <select multiple="multiple" style="height:96px;width:85px">32 <option value="1">Item 1</option>33 <option value="2">Item 2</option>34 <option value="3">Item 3</option>35 <option value="4">Item 4</option>36 <option value="5">Item 5</option>37 <option value="6">Item 6</option>38 </select> 39 </div>40 <div>41 <input type="text" class="txt" id="p1"/>42 <p id="p2"></p>43 </div>44 </body>45 </html>
jQuery-下拉式功能表