利用jquery實現按關鍵詞多選列表框選項



14 53 18



特效描述:利用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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 文字切換 文字選項卡
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子