jQuery下拉列表select美化插件jQselectable



133 531 178



特效描述:下拉列表 select美化插件,

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="skin/selectable/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jQselectable.js"></script>

3. HTML代码

<div class="pagebody"> 
	<h1>jQuery下拉列表插件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>
	    		</optgroup>
	    		<optgroup label="東北">
	    			<option value="02">青森県</option>
	    			<option value="03">岩手県</option>	
	    			<option value="04">宮城県</option>
	    			<option value="05">秋田県</option>
	    			<option value="06">山形県</option>
	    			<option value="07">福島県</option>
	    		</optgroup>
	    		<optgroup label="関東">
	    			<option value="08">東京都</option>
	    			<option value="09">茨城県</option>
	    			<option value="10">栃木県</option>
	    			<option value="11">群馬県</option>
	    			<option value="12">埼玉県</option>
	    			<option value="13">千葉県</option>
	    			<option value="14">神奈川県</option>
	    		</optgroup>
	    		<optgroup label="北陸">
	    			<option value="15">富山県</option>
	    			<option value="16">石川県</option>
	    			<option value="17">福井県</option>
	    		</optgroup>
	    		<optgroup label="甲信越">
	    			<option value="18">新潟県</option>
	    			<option value="19">山梨県</option>
	    			<option value="20">長野県</option>
	    		</optgroup>
	    		<optgroup label="東海">
	    			<option value="21">岐阜県</option>
	    			<option value="22">静岡県</option>
	    			<option value="23">愛知県</option>
	    			<option value="24">三重県</option>
	    		</optgroup>
	    		<optgroup label="関西">
	    			<option value="25">滋賀県</option>
	    			<option value="26">京都府</option>
	    			<option value="27">大阪府</option>
	    			<option value="28">兵庫県</option>
	    			<option value="29">奈良県</option>
	    			<option value="30">和歌山県</option>
	    		</optgroup>
	    		<optgroup label="中四国">
	    			<option value="31">鳥取県</option>
	    			<option value="32">島根県</option>
	    			<option value="33">岡山県</option>
	    			<option value="34">広島県</option>
	    			<option value="35">山口県</option>
	    			<option value="36">徳島県</option>
	    			<option value="37">香川県</option>
	    			<option value="38">愛媛県</option>
	    			<option value="39">高知県</option>
	    		</optgroup>
	    		<optgroup label="九州">
	    			<option value="40">福岡県</option>
	    			<option value="41">佐賀県</option>
	    			<option value="42">長崎県</option>
	    			<option value="43">熊本県</option>
	    			<option value="44">大分県</option>
	    			<option value="45">宮崎県</option>
	    			<option value="46">鹿児島県</option>
	    		</optgroup>
	    		<optgroup label="沖縄">
	    			<option value="47">沖縄県</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>
	    		</optgroup>
	    		<optgroup label="東北">
	    			<option value="02">青森県</option>
	    			<option value="03">岩手県</option>	
	    			<option value="04">宮城県</option>
	    			<option value="05">秋田県</option>
	    			<option value="06">山形県</option>
	    			<option value="07">福島県</option>
	    		</optgroup>
	    		<optgroup label="関東">
	    			<option value="08">東京都</option>
	    			<option value="09">茨城県</option>
	    			<option value="10">栃木県</option>
	    			<option value="11">群馬県</option>
	    			<option value="12">埼玉県</option>
	    			<option value="13">千葉県</option>
	    			<option value="14">神奈川県</option>
	    		</optgroup>
	    		<optgroup label="北陸">
	    			<option value="15">富山県</option>
	    			<option value="16">石川県</option>
	    			<option value="17">福井県</option>
	    		</optgroup>
	    		<optgroup label="甲信越">
	    			<option value="18">新潟県</option>
	    			<option value="19">山梨県</option>
	    			<option value="20">長野県</option>
	    		</optgroup>
	    		<optgroup label="東海">
	    			<option value="21">岐阜県</option>
	    			<option value="22">静岡県</option>
	    			<option value="23">愛知県</option>
	    			<option value="24">三重県</option>
	    		</optgroup>
	    		<optgroup label="関西">
	    			<option value="25">滋賀県</option>
	    			<option value="26">京都府</option>
	    			<option value="27">大阪府</option>
	    			<option value="28">兵庫県</option>
	    			<option value="29">奈良県</option>
	    			<option value="30">和歌山県</option>
	    		</optgroup>
	    		<optgroup label="中四国">
	    			<option value="31">鳥取県</option>
	    			<option value="32">島根県</option>
	    			<option value="33">岡山県</option>
	    			<option value="34">広島県</option>
	    			<option value="35">山口県</option>
	    			<option value="36">徳島県</option>
	    			<option value="37">香川県</option>
	    			<option value="38">愛媛県</option>
	    			<option value="39">高知県</option>
	    		</optgroup>
	    		<optgroup label="九州">
	    			<option value="40">福岡県</option>
	    			<option value="41">佐賀県</option>
	    			<option value="42">長崎県</option>
	    			<option value="43">熊本県</option>
	    			<option value="44">大分県</option>
	    			<option value="45">宮崎県</option>
	    			<option value="46">鹿児島県</option>
	    		</optgroup>
	    		<optgroup label="沖縄">
	    			<option value="47">沖縄県</option>
	    		</optgroup>
	    	</select>
	    </dd>
	    <dt><label for="pref2">3) Prefectures with optgroup using selected, <strong>selectable</strong></label></dt>
	    <dd>
	    	<select id="pref2" name="pref2" class="selectable">
	    		<optgroup label="北海道">
	    			<option value="01">北海道</option>
	    		</optgroup>
	    		<optgroup label="東北">
	    			<option value="02">青森県</option>
	    			<option value="03">岩手県</option>	
	    			<option value="04">宮城県</option>
	    			<option value="05">秋田県</option>
	    			<option value="06">山形県</option>
	    			<option value="07">福島県</option>
	    		</optgroup>
	    		<optgroup label="関東">
	    			<option value="08">東京都</option>
	    			<option value="09">茨城県</option>
	    			<option value="10">栃木県</option>
	    			<option value="11">群馬県</option>
	    			<option value="12">埼玉県</option>
	    			<option value="13">千葉県</option>
	    			<option value="14">神奈川県</option>
	    		</optgroup>
	    		<optgroup label="北陸">
	    			<option value="15">富山県</option>
	    			<option value="16">石川県</option>
	    			<option value="17">福井県</option>
	    		</optgroup>
	    		<optgroup label="甲信越">
	    			<option value="18">新潟県</option>
	    			<option value="19">山梨県</option>
	    			<option value="20">長野県</option>
	    		</optgroup>
	    		<optgroup label="東海">
	    			<option value="21">岐阜県</option>
	    			<option value="22">静岡県</option>
	    			<option value="23">愛知県</option>
	    			<option value="24">三重県</option>
	    		</optgroup>
	    		<optgroup label="関西">
	    			<option value="25">滋賀県</option>
	    			<option value="26">京都府</option>
	    			<option value="27" selected="selected">大阪府</option>
	    			<option value="28">兵庫県</option>
	    			<option value="29">奈良県</option>
	    			<option value="30">和歌山県</option>
	    		</optgroup>
	    		<optgroup label="中四国">
	    			<option value="31">鳥取県</option>
	    			<option value="32">島根県</option>
	    			<option value="33">岡山県</option>
	    			<option value="34">広島県</option>
	    			<option value="35">山口県</option>
	    			<option value="36">徳島県</option>
	    			<option value="37">香川県</option>
	    			<option value="38">愛媛県</option>
	    			<option value="39">高知県</option>
	    		</optgroup>
	    		<optgroup label="九州">
	    			<option value="40">福岡県</option>
	    			<option value="41">佐賀県</option>
	    			<option value="42">長崎県</option>
	    			<option value="43">熊本県</option>
	    			<option value="44">大分県</option>
	    			<option value="45">宮崎県</option>
	    			<option value="46">鹿児島県</option>
	    		</optgroup>
	    		<optgroup label="沖縄">
	    			<option value="47">沖縄県</option>
	    		</optgroup>
	    	</select>
	    </dd>
	    <dt><label for="pref_noopt">4) Prefectures without optgrout using br class, <strong>selectable</strong></label></dt>
	    <dd>
	    	<select id="pref_noopt" name="pref_noopt" class="selectable">
	    		<option value="01" class="br">北海道</option>
	    		<option value="02">青森県</option>
	    		<option value="03">岩手県</option>	
	    		<option value="04">宮城県</option>
	    		<option value="05">秋田県</option>
	    		<option value="06">山形県</option>
	    		<option value="07" class="br">福島県</option>
	    		<option value="08">東京都</option>
	    		<option value="09">茨城県</option>
	    		<option value="10">栃木県</option>
	    		<option value="11">群馬県</option>
	    		<option value="12">埼玉県</option>
	    		<option value="13">千葉県</option>
	    		<option value="14" class="br">神奈川県</option>
	    		<option value="15">富山県</option>
	    		<option value="16">石川県</option>
	    		<option value="17" class="br">福井県</option>
	    		<option value="18">新潟県</option>
	    		<option value="19">山梨県</option>
	    		<option value="20" class="br">長野県</option>
	    		<option value="21">岐阜県</option>
	    		<option value="22">静岡県</option>
	    		<option value="23">愛知県</option>
	    		<option value="24" class="br">三重県</option>
	    		<option value="25">滋賀県</option>
	    		<option value="26">京都府</option>
	    		<option value="27">大阪府</option>
	    		<option value="28">兵庫県</option>
	    		<option value="29">奈良県</option>
	    		<option value="30" class="br">和歌山県</option>
	    		<option value="31">鳥取県</option>
	    		<option value="32">島根県</option>
	    		<option value="33">岡山県</option>
	    		<option value="34">広島県</option>
	    		<option value="35">山口県</option>
	    		<option value="36">徳島県</option>
	    		<option value="37">香川県</option>
	    		<option value="38">愛媛県</option>
	    		<option value="39" class="br">高知県</option>
	    		<option value="40">福岡県</option>
	    		<option value="41">佐賀県</option>
	    		<option value="42">長崎県</option>
	    		<option value="43">熊本県</option>
	    		<option value="44">大分県</option>
	    		<option value="45">宮崎県</option>
	    		<option value="46">鹿児島県</option>
	    		<option value="47">沖縄県</option>
	    	</select>
	    </dd>
	    <dt>5) Days using br class, <strong>selectable</strong></dt>
	    <dd>
	    	<select name="date_year" id="date_year" class="selectable m_year">
	    		<option value="1980">1980</option>
	    		<option value="1981">1981</option>
	    		<option value="1982">1982</option>
	    		<option value="1983">1983</option>
	    		<option value="1984">1984</option>
	    		<option value="1985">1985</option>
	    		<option value="1986">1986</option>
	    		<option value="1987">1987</option>
	    		<option value="1988">1988</option>
	    		<option value="1989" class="br">1989</option>
	    		<option value="1990">1990</option>
	    		<option value="1991">1991</option>
	    		<option value="1992">1992</option>
	    		<option value="1993">1993</option>
	    		<option value="1994">1994</option>
	    		<option value="1995">1995</option>
	    		<option value="1996">1996</option>
	    		<option value="1997">1997</option>
	    		<option value="1998">1998</option>
	    		<option value="1999" class="br">1999</option>
	    		<option value="2000">2000</option>
	    		<option value="2001">2001</option>
	    		<option value="2002">2002</option>
	    		<option value="2003">2003</option>
	    		<option value="2004">2004</option>
	    		<option value="2005">2005</option>
	    		<option value="2006">2006</option>
	    		<option value="2007">2007</option>
	    		<option value="2008" selected="selected">2008</option>
	    		<option value="2009">2009</option>
	    	</select> 年
	    	<select name="date_month" id="date_month" class="selectable m_month">
	    		<option value="1">1</option>
	    		<option value="2">2</option>
	    		<option value="3">3</option>
	    		<option value="4">4</option>
	    		<option value="5">5</option>
	    		<option value="6">6</option>
	    		<option value="7">7</option>
	    		<option value="8">8</option>
	    		<option value="9">9</option>
	    		<option value="10">10</option>
	    		<option value="11">11</option>
	    		<option value="12">12</option>
	    	</select> 月
	    	<select name="date_day" id="date_day" class="selectable m_day">
	    		<option value="1">1</option>
	    		<option value="2">2</option>
	    		<option value="3">3</option>
	    		<option value="4">4</option>
	    		<option value="5">5</option>
	    		<option value="6">6</option>
	    		<option value="7" class="br">7</option>
	    		<option value="8">8</option>
	    		<option value="9">9</option>
	    		<option value="10">10</option>
	    		<option value="11">11</option>
	    		<option value="12">12</option>
	    		<option value="13">13</option>
	    		<option value="14" class="br">14</option>
	    		<option value="15">15</option>
	    		<option value="16">16</option>
	    		<option value="17">17</option>
	    		<option value="18">18</option>
	    		<option value="19">19</option>
	    		<option value="20">20</option>
	    		<option value="21" class="br">21</option>
	    		<option value="22">22</option>
	    		<option value="23">23</option>
	    		<option value="24">24</option>
	    		<option value="25">25</option>
	    		<option value="26">26</option>
	    		<option value="27">27</option>
	    		<option value="28" class="br">28</option>
	    		<option value="29">29</option>
	    		<option value="30">30</option>
	    		<option value="31">31</option>
	    	</select> 日	
	    </dd>
	</dl>
	<h2>Simplebox</h2>
	<dl id="simpleBox">
	    <dt><label for="pref_noopt2">6) Prefectures without optgroup, <strong>simpleBox</strong></label></dt>
	    <dd>
	    	<select id="pref_noopt2" name="pref_noopt2" class="simpleBox">
	    		<option value="01">北海道</option>
	    		<option value="02">青森県</option>
	    		<option value="03">岩手県</option>	
	    		<option value="04">宮城県</option>
	    		<option value="05">秋田県</option>
	    		<option value="06">山形県</option>
	    		<option value="07">福島県</option>
	    		<option value="08">東京都</option>
	    		<option value="09">茨城県</option>
	    		<option value="10">栃木県</option>
	    		<option value="11">群馬県</option>
	    		<option value="12">埼玉県</option>
	    		<option value="13">千葉県</option>
	    		<option value="14">神奈川県</option>
	    		<option value="15">富山県</option>
	    		<option value="16">石川県</option>
	    		<option value="17">福井県</option>
	    		<option value="18">新潟県</option>
	    		<option value="19">山梨県</option>
	    		<option value="20">長野県</option>
	    		<option value="21">岐阜県</option>
	    		<option value="22">静岡県</option>
	    		<option value="23">愛知県</option>
	    		<option value="24">三重県</option>
	    		<option value="25">滋賀県</option>
	    		<option value="26">京都府</option>
	    		<option value="27">大阪府</option>
	    		<option value="28">兵庫県</option>
	    		<option value="29">奈良県</option>
	    		<option value="30">和歌山県</option>
	    		<option value="31">鳥取県</option>
	    		<option value="32">島根県</option>
	    		<option value="33">岡山県</option>
	    		<option value="34">広島県</option>
	    		<option value="35">山口県</option>
	    		<option value="36">徳島県</option>
	    		<option value="37">香川県</option>
	    		<option value="38">愛媛県</option>
	    		<option value="39">高知県</option>
	    		<option value="40">福岡県</option>
	    		<option value="41">佐賀県</option>
	    		<option value="42">長崎県</option>
	    		<option value="43">熊本県</option>
	    		<option value="44">大分県</option>
	    		<option value="45">宮崎県</option>
	    		<option value="46">鹿児島県</option>
	    		<option value="47">沖縄県</option>
	    	</select>
	    </dd>
	    <dt>7) Days, <strong>simpleBox</strong></dt>
	    <dd>
	    	<select name="date_year2" id="date_year2" class="simpleBox s_year">
	    		<option value="1980">1980</option>
	    		<option value="1981">1981</option>
	    		<option value="1982">1982</option>
	    		<option value="1983">1983</option>
	    		<option value="1984">1984</option>
	    		<option value="1985">1985</option>
	    		<option value="1986">1986</option>
	    		<option value="1987">1987</option>
	    		<option value="1988">1988</option>
	    		<option value="1989">1989</option>
	    		<option value="1990">1990</option>
	    		<option value="1991">1991</option>
	    		<option value="1992">1992</option>
	    		<option value="1993">1993</option>
	    		<option value="1994">1994</option>
	    		<option value="1995">1995</option>
	    		<option value="1996">1996</option>
	    		<option value="1997">1997</option>
	    		<option value="1998">1998</option>
	    		<option value="1999">1999</option>
	    		<option value="2000">2000</option>
	    		<option value="2001">2001</option>
	    		<option value="2002">2002</option>
	    		<option value="2003">2003</option>
	    		<option value="2004">2004</option>
	    		<option value="2005">2005</option>
	    		<option value="2006">2006</option>
	    		<option value="2007">2007</option>
	    		<option value="2008">2008</option>
	    		<option value="2009">2009</option>
	    	</select> /
	    	<select name="date_month2" id="date_month2" class="simpleBox s_month">
	    		<option value="1">1</option>
	    		<option value="2">2</option>
	    		<option value="3">3</option>
	    		<option value="4">4</option>
	    		<option value="5">5</option>
	    		<option value="6">6</option>
	    		<option value="7">7</option>
	    		<option value="8">8</option>
	    		<option value="9">9</option>
	    		<option value="10">10</option>
	    		<option value="11">11</option>
	    		<option value="12">12</option>
	    	</select> /
	    	<select name="date_day2" id="date_day2" class="simpleBox s_day">
	    		<option value="1">1</option>
	    		<option value="2">2</option>
	    		<option value="3">3</option>
	    		<option value="4">4</option>
	    		<option value="5">5</option>
	    		<option value="6">6</option>
	    		<option value="7">7</option>
	    		<option value="8">8</option>
	    		<option value="9">9</option>
	    		<option value="10">10</option>
	    		<option value="11">11</option>
	    		<option value="12">12</option>
	    		<option value="13">13</option>
	    		<option value="14">14</option>
	    		<option value="15">15</option>
	    		<option value="16">16</option>
	    		<option value="17">17</option>
	    		<option value="18">18</option>
	    		<option value="19">19</option>
	    		<option value="20">20</option>
	    		<option value="21">21</option>
	    		<option value="22">22</option>
	    		<option value="23">23</option>
	    		<option value="24">24</option>
	    		<option value="25">25</option>
	    		<option value="26">26</option>
	    		<option value="27">27</option>
	    		<option value="28">28</option>
	    		<option value="29">29</option>
	    		<option value="30">30</option>
	    		<option value="31">31</option>
	    	</select> 
	    </dd>
	</dl>
	<h2>Using Callback</h2>
	<dl id="callbacks">
	    <dt><label for="callback">8) Selector, <strong>Callback</strong></label></dt>
	    <dd>
	    	<select id="callback" name="callback" class="callback">
	    		<option value="">select me</option>
	    		<option value="#">moto-mono</option>
	    		<option value="#">Goolge</option>
	    		<option value="#">Gmail</option>
	    		<option value="#">Google 画像検索</option>
	    		<option value="#">Yahoo</option>
	    		<option value="#">Livedoor</option>
	    	</select>
	    </dd>
	</dl>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 时间轴 图片头像上传 文字标签 文字提示框 日历选择器 文件上传 彩色文字 提示框/弹出层 时间日期插件 文本框 文字闪烁 layer 下拉框 打字机 lightbox 复选 文字列表 单选 Tooltip工具提示框 文字弹幕 登录框 浮动提示框 文字高亮 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 文字叠加 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 360全景 html5文字动画 文字滚动 文字滑动 文字切换 弹出层拖动 窗口提示框 图片文字 文字导航菜单 切换按钮 日历日期时间 form表单 文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到