利用Jquery实现可多选的下拉框
(编辑：jimmy 日期: 2025/12/28 浏览：3 次 )
首先下载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="/UploadFiles/2021-04-02/jquery.js"><link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-ui.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.multiselect.js"><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="/UploadFiles/2021-04-02/jquery.js"><link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-ui.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.multiselect.js"><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 无限级下拉菜单的简单实现代码