利用Jquery實現(xiàn)可多選的下拉框
更新時間:2014年02月21日 09:11:28 作者:
本篇文章主要是對Jquery實現(xiàn)可多選的下拉框的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
首先下載jquery.multiselect.js 的插件然后復(fù)制下列代碼,只需改下路徑就可以實現(xiàn)可多選下拉框。如果好用還請多多支持!
<!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 點擊文本框彈出下拉框的實例代碼
- jquery獲得下拉框值的代碼
- jquery動態(tài)加載select下拉框示例代碼
- Jquery操作下拉框(DropDownList)實現(xiàn)取值賦值
- 基于jquery的無限級聯(lián)下拉框js插件
- JQuery實現(xiàn)級聯(lián)下拉框效果實例講解
- 基于jquery實現(xiàn)的可編輯下拉框?qū)崿F(xiàn)代碼
- jquery模擬SELECT下拉框取值效果
- 在js(jquery)中獲得文本框焦點和失去焦點的方法
- jquery設(shè)置text的值示例(設(shè)置文本框 DIV 表單值)
- jQuery實現(xiàn)點擊下拉框中的值累加到文本框中的方法示例
相關(guān)文章
jQuery學(xué)習(xí)筆記之jQuery原型屬性和方法
這篇文章主要介紹了jQuery原型屬性和方法,,需要的朋友可以參考下2014-06-06jQuery中(function($){})(jQuery)詳解
本文通過具體示例向大家詳細(xì)介紹了jQuery中的(function($){})(jQuery)的用法和意義,對此有相同困惑的小伙伴可以參考下本文。2015-07-07jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹
jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹,使用jQuery EasyUI的朋友可以參考下。2011-10-10jQuery插件WebUploader實現(xiàn)文件上傳
這篇文章主要為大家詳細(xì)介紹了jQuery插件WebUploader實現(xiàn)文件上傳,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11