利用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()方法的区别，感兴趣的朋友参考下2018-05-05
这篇文章主要为大家详细介绍了jQuery实现消息弹出框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），是指一种创建交互式网页应用的网页开发技术2011-10-10
jQuery 锚点跳转滚动条平滑滚动一句话代码,需要的朋友可以参考下。2010-04-04
这篇文章主要介绍了jQuery实现响应鼠标背景变化的动态菜单效果代码,涉及jquery鼠标mouseover事件操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要帮助大家轻松实现jquery选项卡切换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
最新评论