利用Jquery實(shí)現(xiàn)可多選的下拉框
更新時(shí)間:2014年02月21日 09:11:28 作者:
本篇文章主要是對(duì)Jquery實(shí)現(xiàn)可多選的下拉框的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助
首先下載jquery.multiselect.js 的插件然后復(fù)制下列代碼,只需改下路徑就可以實(shí)現(xiàn)可多選下拉框。如果好用還請(qǐng)多多支持!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body {
margin-left: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.multiselect.css" />
<script type="text/javascript">
$(function(){
$("#company").multiselect();
});
</script>
</head>
<body>
<table align="center">
<tr>
<td height="49"><select name="company" id="company">
<option value="北方公司" selected="selected">北方公司【總公司】</option>
<option value="西南公司">西南公司</option>
</select><span id="company1" style="color:#FF0000"></span></td>
<td align="left"> </td>
</tr>
</table>
</body>
</html>
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body {
margin-left: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.multiselect.css" />
<script type="text/javascript">
$(function(){
$("#company").multiselect();
});
</script>
</head>
<body>
<table align="center">
<tr>
<td height="49"><select name="company" id="company">
<option value="北方公司" selected="selected">北方公司【總公司】</option>
<option value="西南公司">西南公司</option>
</select><span id="company1" style="color:#FF0000"></span></td>
<td align="left"> </td>
</tr>
</table>
</body>
</html>
您可能感興趣的文章:
- jQuery中ztree 點(diǎn)擊文本框彈出下拉框的實(shí)例代碼
- jquery獲得下拉框值的代碼
- jquery動(dòng)態(tài)加載select下拉框示例代碼
- Jquery操作下拉框(DropDownList)實(shí)現(xiàn)取值賦值
- 基于jquery的無限級(jí)聯(lián)下拉框js插件
- JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
- 基于jquery實(shí)現(xiàn)的可編輯下拉框?qū)崿F(xiàn)代碼
- jquery模擬SELECT下拉框取值效果
- 在js(jquery)中獲得文本框焦點(diǎn)和失去焦點(diǎn)的方法
- jquery設(shè)置text的值示例(設(shè)置文本框 DIV 表單值)
- jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法示例
相關(guān)文章
jquery插件之信息彈出框showInfoDialog(成功/錯(cuò)誤/警告/通知/背景遮罩)
某某同學(xué)最近寫了個(gè)基于jquery的信息彈出插件showInfoDialog,該插件對(duì)背景進(jìn)行遮罩,然后彈出信息顯示框,信息顯示種類包括(操作成功/錯(cuò)誤信息/警告信息/通知信息)感興趣的朋友可以了解下2013-01-01
jQuery 下拉列表 二級(jí)聯(lián)動(dòng)插件分享
jQuery二級(jí)聯(lián)動(dòng)插件:jQuery.selected 一個(gè)頁(yè)面可以引用多個(gè)聯(lián)動(dòng)效果2012-03-03
jQuery調(diào)取jSon數(shù)據(jù)并展示的方法
這篇文章主要介紹了jQuery調(diào)取jSon數(shù)據(jù)并展示的方法,實(shí)例分析了jQuery調(diào)用json數(shù)據(jù)及展示的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
基于jquery的劃詞搜索實(shí)現(xiàn)(備忘)
最近,需要做個(gè)劃詞搜索功能。在網(wǎng)上找了好些,最后,參照進(jìn)行修改,實(shí)現(xiàn)了想要的功能。這里,做個(gè)記錄,以備日后所用。2010-09-09
關(guān)于jquery中attr()和prop()方法的區(qū)別
今兒是腳本之家小編給大家總結(jié)的jquery中attr()和prop()方法的區(qū)別,感興趣的朋友參考下2018-05-05
jQuery 錨點(diǎn)跳轉(zhuǎn)滾動(dòng)條平滑滾動(dòng)一句話代碼
jQuery 錨點(diǎn)跳轉(zhuǎn)滾動(dòng)條平滑滾動(dòng)一句話代碼,需要的朋友可以參考下。2010-04-04
jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)背景變化的動(dòng)態(tài)菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)背景變化的動(dòng)態(tài)菜單效果代碼,涉及jquery鼠標(biāo)mouseover事件操作頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
輕松實(shí)現(xiàn)jquery選項(xiàng)卡切換效果
這篇文章主要幫助大家輕松實(shí)現(xiàn)jquery選項(xiàng)卡切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10

