<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery带分页的下拉菜单选择框代码</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" />
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/comboselect.css" type="text/css">
<link rel="stylesheet" href="css/demo.css" />
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="container" style="margin-top: 50px;">
<h1 class="heading">下拉分页控件 <small>支持下拉，分页，键盘操作等功能</small></h1>
<div class="row-fluid">
<h4 class="heading">基本初始化 <small></small></h4>
<input type="text" id="comboSelect" class="" placeholder="请输入查询关键字" >
<pre>
//表单声明元素
<input type="text" id="comboSelect" class="input-block-level" >
//定义数组，在服务端返回的数据也以该格式返回：Array[{Object},{...}]
var tag_data = [
{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//showField：设置下拉列表中显示文本的列
//keyField：设置下拉列表项目中项目的KEY值，用于提交表单
//data：数据源，可以是JSON数据格式，也可以是URL
//callback：选中项目后的回调函数
$('#comboSelect').bComboSelect({
showField : 'desc',
keyField : 'id',
data : tag_data
});
]]>
</pre>
</div>
<div class="row-fluid">
<h4 class="heading">设置初始化选中项目 <small>以及请求参数传递等……</small></h4>
<div class="pull-right">
<input type="text" id="comboSelect1" class="input-medium" data-init="4" >
</div>
<pre>
//data-init：设置列表初始被选中的项目，传递值为keyField对应的内容
<input type="text" id="comboSelect1" data-init="4" >
$('#comboSelect').bComboSelect({
showField : 'desc',
keyField : 'id',
data : '/sys/userinfo',
params : function(){return {'name':'aa','sex':1};}
});
</pre>
</div>
<div class="row-fluid">
<h4 class="heading">项目显示文本自定义 <small>允许根据现有数据字段进行自由组合</small></h4>
<input type="text" id="comboSelect2" class="input-xlarge" placeholder="请输入查询关键字" >
<pre>
<input type="text" id="comboSelect" class="input-xlarge" >
$('#comboSelect').bComboSelect({
showField : 'desc',
keyField : 'id',
data : tag_data,
//格式化显示项目，提供源数据进行使用
formatItem : function(data){
return data.desc + '(' + data.name + ')';
}
});
</pre>
</div>
<div class="row-fluid">
<h4 class="heading">多项选择模式 <small></small></h4>
<input type="text" id="comboSelect3" class="input-block-level" placeholder="请输入查询关键字" >
<pre>
<input type="text" id="comboSelect" class="input-block-level" >
$('#comboSelect').bComboSelect({
showField : 'desc',
keyField : 'id',
data : tag_data,
//启用多选模式
multiple : true
});
</pre>
</div>
<div class="row-fluid">
<h4 class="heading">事件回调处理 <small>项目选中后，触发的事件处理</small></h4>
<input type="text" id="comboSelect4" class="input-block-level" placeholder="请输入查询关键字" >
<div id="callbackLog" class="logBox"></div>
<pre>
<input type="text" id="comboSelect" class="input-block-level" >
$('#comboSelect').bComboSelect({
showField : 'desc',
keyField : 'id',
data : tag_data,
multiple : true,
//选中项目后的回调处理
//入参：data：选中行的原始数据对象
callback : function(data){
$('#callbackLog').append(data.desc + '(' + data.name + ')<br/>');
}
});
</pre>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/comboselect.min.js" ></script>
<script type="text/javascript" src="js/b.comboselect.js" ></script>
<script type="text/javascript" src="js/demo.js" ></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码下载：<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery带分页的下拉菜单选择框代码.zip
版权申诉
190 浏览量
2023-09-22
00:19:16
上传
评论
收藏 69KB ZIP 举报
jQuery带分页的下拉菜单选择框代码.zip （9个子文件） 
js 
comboselect.min.js 34KB demo.js 3KB b.comboselect.js 5KB comboselect.js 65KB jquery-1.11.0.min.js 94KB css demo.css 980B normalize.css 2KB comboselect.css 8KB
index.html 5KB资源评论
