使用 jQselectable 生成有层次感的下拉列表框

红薯 发布于 2010/03/21 07:58
阅读 3K+
收藏 10

看看下面这个下拉列表的截图:

实现这个效果只需要首先将 select 下拉列表框按如下方式组织好数据:

 

<select id="pref" name="pref" class="selectable">
<optgroup label="北海道">
	<option value="1">北海道</option>
</optgroup>
<optgroup label="東北">
	<option value="2">青森県</option>
	<option value="3">岩手県</option>
	<option value="4">宮城県</option>
	<option value="5">秋田県</option>
	<option value="6">山形県</option>
	<option value="7">福島県</option>
</optgroup>
<optgroup label="関東">
	<option value="8">茨城県</option>
	<option value="9">栃木県</option>
	<option value="10">群馬県</option>
	<option value="11">埼玉県</option>
	<option value="12">千葉県</option>
	<option value="13">東京都</option>
	<option value="14">神奈川県</option>
</optgroup>
</select>

然后调用 jQselectable 的代码:$('#pref').jQselectable(); 即可。

轻松,而且用户选择起来非常的直观。去下载一个来试试吧。

加载中
返回顶部
顶部