利用jquery实现按关键词多选列表框选项



45 178 60



特效描述:利用jquery实现 按关键词 多选列表框选项,利用jquery实现按关键词多选列表框选项

代码结构

1. 引入CSS

<link href="style/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="style/default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="style/styling.css" rel="stylesheet" type="text/css" media="screen" />

2. 引入JS

<script type="text/javascript" src="javascript/jquery-1.3.1.min.js"></script>

3. HTML代码

	<div id="container">
		<div id="header">
			<div id="header-in">
				<h2> jQuery Tutorial: Selecting Multiple Select Form Elements on 
				the Fly</h2>
			</div> <!-- end #header-in -->
		</div> <!-- end #header -->
		<div id="content-wrap" class="clear lcol">
			<div class="content">
				<div class="content-in">
					<form action="">
						<div id="radios">
							<div class="form-item" id="none-wrapper">
						 		<label class="option"><input id="none" name="color[value]" value="None" class="form-radio" type="radio" checked="checked" /> 
								Select None</label>
							</div>
							<div class="form-item" id="red-wrapper">
						 		<label class="option"><input id="red" name="color[value]" value="Red" class="form-radio" type="radio" /> 
								Select all Red</label>
							</div>
							<div class="form-item" id="green-wrapper">
								<label class="option"><input id="green" name="color[value]" value="Green" class="form-radio" type="radio" /> 
								Select all Green</label>
							</div>
							<div class="form-item" id="blue-wrapper">
						 		<label class="option"><input id="blue" name="color[value]" value="Blue" class="form-radio" type="radio" /> 
								Select all Blue</label>
							</div>
							<div class="form-item" id="all-wrapper">
						 		<label class="option"><input id="all" name="color[value]" value="All Colors" class="form-radio" type="radio" /> 
								Select all Colors</label>
							</div>
							<div class="form-item" id="red-green-wrapper">
						 		<label class="option"><input id="red-green" name="color[value]" value="Red-Green" class="form-radio" type="radio" /> 
								Red &amp; Green</label>
							</div>
						</div>
					<div id="all-select-wrapper">
					 <label for="colors">Colors:</label>
					 <select name="colors" multiple="multiple" id="colors">
						 <option value="Red - 1">Red - Option 1</option>
						 <option value="Red - 2">Red - Option 2</option>
						 <option value="Red - 3">Red - Option 3</option>
						 <option value="Green - 1">Green - Option 1</option>
						 <option value="Green - 2">Green - Option 2</option>
						 <option value="Green - 3">Green - Option 3</option>
						 <option value="Blue - 1">Blue - Option 1</option>
						 <option value="Blue - 2">Blue - Option 2</option>
						 <option value="Blue - 3">Blue - Option 3</option>
					 </select>
					</div>	
					<div id="submit-wrapper"><input type="submit" value="Submit" /></div>
					</form>
				<div>&nbsp;</div>
				</div> <!-- end .content-in -->
			</div> <!-- end .content -->
		</div> <!-- end #content-wrap -->
		<div class="clear"></div>
		<center>
</center>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 导航切换 图片切换 文字切换 背景切换 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到