jQselectable 挺不错的下拉框插件

最新推荐文章于 2018-06-05 10:39:20 发布

niujunluck

最新推荐文章于 2018-06-05 10:39:20 发布

阅读量130

点赞数

分类专栏： jquer 插件 jquery 文章标签： jqselectable jquery select ViewUI

本文链接：https://blog.csdn.net/niujunluck/article/details/84166337

版权

jquery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquer 插件

1 篇文章 0 订阅

订阅专栏

最近项目中使用到了一个挺不错的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>

niujunluck

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQselectable 挺不错的下拉框插件

最近项目中使用到了一个挺不错的jquery插件，特意记录一下。总结一下，觉得优点有以下3点。1可以替代以往的二级联动，可以将3及联动改成二级联动。2可以丰富用户体验，相比之下，用户更加喜欢2简单一些的事情。效果如果！ Html以及javascript代码：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 St...
复制链接

扫一扫

专栏目录