jquey : 表单: 下拉框应用_deep 下拉框-优快云博客

本文介绍了一个使用jQuery操作表单元素的具体案例，包括两个可选择的下拉列表，通过按钮和双击事件实现选项的相互转移，并展示了如何收集选择项的值。

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

From 锋利的 jQuery 第2版

5.1 表单应用

5.1.4 下拉框应用

select2.html 内含div 网页布局

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<style type="text/css">
 * { margin:0; padding:0; font-size:12px; }
 .wrapper {
            height: auto!important;/* height优先级 */
            height: 30%;
 }
 .centent {
	float:left;
	text-align: center;
	margin: 10px;
 }
 .clear  /* 清除浮动 */ 
 {
     height: 70%; /* clear 的 height 必须和 result 的值样高 */
	clear:both;
 }
 .result {
	height: 70%;
 }
span { 
	display:block; 
	margin:2px 2px;
	padding:4px 10px; 
	background:#898989;
	cursor:pointer;
	font-size:12px;
	color:white;
}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	// 移到右边
	$('#add').click(function() {
	// 获取选中的选项，删除并追加给对方
		$('#select1 option:selected').appendTo('#select2');
	});
	// 移到左边
	$('#remove').click(function() {
		$('#select2 option:selected').appendTo('#select1');
	});
	// 全部移到右边
	$('#add_all').click(function() {
		// 获取全部的选项,删除并追加给对方
		$('#select1 option').appendTo('#select2');
	});
	// 全部移到左边
	$('#remove_all').click(function() {
		$('#select2 option').appendTo('#select1');
	});
	// 双击选项
	$('#select1').dblclick(function(){ // 绑定双击事件
		// 获取全部的选项,删除并追加给对方
		$("option:selected",this).appendTo('#select2'); // 追加给对方
	});
	// 双击选项
	$('#select2').dblclick(function(){
	   $("option:selected",this).appendTo('#select1');
	});
	// 收集 select1 options
	$('#button1').click(function(){
		var options = $('#select1 option');
		if (options.length ==0) return;
		var val;
		var str ="";
		for(var i=0; i< options.length; i++){
			val = options[i].text;
			str = str+ val +',';
		}
		$("#result").text(str);
	});
	// 收集 select2 values
	$('#button2').click(function(){
		var options = $('#select2 option');
		if (options.length ==0) return;
		var val;
		var str ="";
		for(var i=0; i< options.length; i++){
			val = options[i].value;
			str = str+ val +',';
		}
		$("#result").text(str);
	});
	// 收集 select2 options
	$('#button3').click(function(){
		var options = $('#select2 option');
		if (options.length ==0) return;
		var val;
		var str ="";
		for(var i=0; i< options.length; i++){
			val = options[i].text;
			str = str+ val +',';
		}
		$("#result").text(str);
	});
});
</script>

</head>
<body>
	<div class="header">
	<label>  请先选择字段：</label>
	</div>
	<div class="wrapper">
	<div class="centent">
		<select multiple="multiple" id="select1" size="10" style="width:100px;height:160px;">
			<option value="1">选项1</option>
			<option value="2">选项2</option>
			<option value="3">选项3</option>
			<option value="4">选项4</option>
			<option value="5">选项5</option>
			<option value="6">选项6</option>
			<option value="7">选项7</option>
			<option value="8">选项8</option>
		</select>
		<div>
			<span id="add" >选中添加到右边>></span>
			<span id="add_all" >全部添加到右边>></span>
			<input type="button" id="button1" value="button1">
		</div>
	</div>


	<div class="centent">
		<select multiple="multiple" id="select2" size="10" style="width: 100px;height:160px;">
			
		</select>
		<div>
			<span id="remove">选中删除，移到左边</span>
			<span id="remove_all">全部删除，移到左边</span>
			<input type="button" id="button2" value="button2">
		</div>
	</div>

	<div class="centent">
		<input type="button" id="button3" value="查询条件:"><br/>
		<div>
			<textarea name="condition"  size="10" style="width:500px;height:200px;">where 1=1
			</textarea>
		</div>
	</div>
	</div>
	<!-- 清除浮动, 必不可少 -->
	<div class="clear"></div>
	<div class="result" id="result"></div>
</body>
</html>