jQselectable 挺不错的下拉框插件
最近项目中使用到了一个挺不错的jquery插件，特意记录一下。总结一下，觉得优点有以下3点。1可以替代以往的二级联动，可以将3及联动改成二级联动。2可以丰富用户体验，相比之下，用户更加喜欢2简单一些的事情。效果如果！
http://dl.iteye.com/upload/picture/pic/108665/49ce0ef4-f182-3e3b-aaf7-55dece4837cd-thumb.png
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>
页:
[1]