利用Jquery实现可多选的下拉框

177 阅读 0 评论 117 点赞

我是靠谱客的博主称心冰淇淋，最近开发中收集的这篇文章主要介绍利用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>