利用Jquery實現可多選的下拉框
更新時間：2014年02月21日 09:11:28 作者：
本篇文章主要是對Jquery實現可多選的下拉框的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
首先下載jquery.multiselect.js 的插件然后復制下列代碼，只需改下路徑就可以實現可多選下拉框。如果好用還請多多支持！
<!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>
復制代碼 代碼如下:
<!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插件之信息彈出框showInfoDialog(成功/錯誤/警告/通知/背景遮罩)
某某同學最近寫了個基于jquery的信息彈出插件showInfoDialog，該插件對背景進行遮罩，然后彈出信息顯示框，信息顯示種類包括(操作成功/錯誤信息/警告信息/通知信息)感興趣的朋友可以了解下2013-01-01
jQuery二級聯動插件：jQuery.selected 一個頁面可以引用多個聯動效果2012-03-03
這篇文章主要介紹了jQuery調取jSon數據并展示的方法,實例分析了jQuery調用json數據及展示的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
最近，需要做個劃詞搜索功能。在網上找了好些，最后，參照進行修改，實現了想要的功能。這里，做個記錄，以備日后所用。2010-09-09
關于jquery中attr()和prop()方法的區(qū)別
今兒是腳本之家小編給大家總結的jquery中attr()和prop()方法的區(qū)別，感興趣的朋友參考下2018-05-05
這篇文章主要為大家詳細介紹了jQuery實現消息彈出框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
AJAX 指異步 JavaScript 及 XML（Asynchronous JavaScript And XML），是指一種創(chuàng)建交互式網頁應用的網頁開發(fā)技術2011-10-10
jQuery 錨點跳轉滾動條平滑滾動一句話代碼,需要的朋友可以參考下。2010-04-04
jQuery實現響應鼠標背景變化的動態(tài)菜單效果代碼
這篇文章主要介紹了jQuery實現響應鼠標背景變化的動態(tài)菜單效果代碼,涉及jquery鼠標mouseover事件操作頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要幫助大家輕松實現jquery選項卡切換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10