jQselectable 挺不错的下拉框插件

niuka

浏览: 51589 次
性别:
来自: 上海

最近访客更多访客>>

winjune

huangdada

土申日月羊

JC肥鱼

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquer 插件
jquery

jqselectable jquery select

最近项目中使用到了一个挺不错的jquery插件，特意记录一下。总结一下，觉得优点有以下3点。1可以替代以往的二级联动，可以将3及联动改成二级联动。2可以丰富用户体验，相比之下，用户更加喜欢2简单一些的事情。

效果如果！

Html以及javascript代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>jQselectable : make selectbox so useful</title>
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<link type="text/css" rel="stylesheet" href="skin/selectable/style.css" />
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("jquery", "1.3.2");</script>
	<script type="text/javascript" src="js/jQselectable.js"></script>
	<script type="text/javascript">
	jQuery(function($){

	$("#pref").jQselectable({
			set: "fadeIn",
			setDuration: "fast",
			opacity: .9
		});
	});
	</script>
</head>

<body>

<div class="pagebody">
	<h1>jQselectable</h1>
	<p id="skin">change styles：<a href="#selectable">selectable</a> | <a href="#natural">natural</a></p>
	<h2>Default selectbox</h2>
	<dl id="noapply">
	    <dt><label for="pref_noapply">1) Default selectbox</label></dt>
	    <dd>
	    	<select id="pref_noapply" name="pref_noapply" class="">
	    		<optgroup label="上海">
	    			<option value="01">徐汇</option>
					<option value="01">浦东新区</option>
	    		</optgroup>
	    		<optgroup label="湖南">
	    			<option value="02">吉首</option>
	    			<option value="03">长沙</option>	
	    			<option value="04">湘潭</option>
	    			<option value="05">浏阳</option>
	    		</optgroup>
	    	</select>
	    </dd>
	</dl>
	
	<h2>jQselectable</h2>
	<dl id="selectable">
	    <dt><label for="pref">2) Prefectures with optgroup not using selected, <strong>selectable</strong></label></dt>
	    <dd>
	    	<select id="pref" name="pref" class="selectable">
	    		<optgroup label="上海">
	    			<option value="01">徐汇</option>
					<option value="01">浦东新区</option>
	    		</optgroup>
	    		<optgroup label="湖南">
	    			<option value="02">吉首</option>
	    			<option value="03">长沙</option>	
	    			<option value="04">湘潭</option>
	    			<option value="05">浏阳</option>
	    		</optgroup>
	    	</select>
	    </dd>
	   
	  
	    
</div>

</body>
</html>