combobox 属性、事件、方法_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
combobox 属性、事件、方法
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩23页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢在用miniUI来写程序的时候遇见的一点小问题，记下来，也算分享下
需求如下：&请选择&下面有5个可选项，可供选择，根据这些条件来查询有关信息；当选择的是&用户名&，&真实姓名&，&手机号&的时候，后面紧跟着的是一个文本框格式的框，可以输入要查询的相关信息；
当选择的是&所属地市&，&所属部门&的时候，紧跟的要变为一个下拉菜单，内容根据&所属地市&或者&所属部门&来加载，如图所示：
解决方案如下：
html页中我是这么的去做的，根据不同的条件定义不同的div，然后在JS中对第一个下拉框中选择的信息进行判断，然后再显示相关div，隐藏无关的div
&table style="width: 100%; height: 30"&
&td align="left" style="width: 50"&
&div id="cb1" style="float:width: 120"&
&input id="cmb1" value="Selected" url="SearchText.txt" class="mini-combobox" allowinput="false" onvaluechanged="GetFollow()";/&&/div&&&
&div id="cbTextbox" style="float:margin-left:10width: 110"&
&input id="key" class="mini-textbox" onenter="onKeyEnter" /&
&div id="cbOrganization" style="float:margin-left:10width: 110display:none"&
&input id="keyOrganization"
url="getCity.ashx?t=s&method=SearchCity" class="mini-combobox" allowinput="false" /&
&div id="cbDepartment" style="float:margin-left:10width: 110display:none"&
&input id="keyDepartment" value="加管" url="Department.txt" class="mini-combobox" allowinput="false" /&
& &a class="mini-button" iconcls="icon-search" onclick="searchData()" plain="true"&
function GetFollow() {
var div = document.getElementById("cb2");
var selectInfo = mini.get("cmb1").getValue();
if (selectInfo == "UserName" || selectInfo == "RealName" || selectInfo == "Mobile") {
//例如第一个下拉菜单选择的是&用户名&的话，则显示出来cbTextbox的div，隐藏另外两个
document.getElementById("cbTextbox").style.display = "block";
document.getElementById("cbOrganization").style.display = "none";
document.getElementById("cbDepartment").style.display = "none";
}else if (selectInfo == "Organization") {
document.getElementById("cbTextbox").style.display = "none";
document.getElementById("cbOrganization").style.display = "block";
document.getElementById("cbDepartment").style.display = "none";
} else if (selectInfo == "Department") {
document.getElementById("cbTextbox").style.display = "none";
document.getElementById("cbOrganization").style.display = "none";
document.getElementById("cbDepartment").style.display = "block";
//#region //查询
function searchData() {
var selectInfo = mini.get("cmb1").getValue();
if (selectInfo == "Selected") {
alert("请您选择查询条件");
} else if (selectInfo == "UserName" || selectInfo == "RealName" || selectInfo == "Mobile") {
key = mini.get("key").getValue();
} else if (selectInfo == "Organization") {
key = mini.get("keyOrganization").getValue();
} else if (selectInfo == "Department") {
key = mini.get("keyDepartment").getValue();
var newkey = { key: key, selectInfo: selectInfo };
grid.load(newkey);
function onKeyEnter(e) {
searchData();
//#endregion
阅读(...) 评论()BootStrap中关于Select下拉框选择触发事件及扩展
字体：[ ] 类型：转载 时间：
Select下拉框的问题，想在选择一个选项后，前台显示做出变动，并且知道选择的是第几个选项。 怎么解决这个问题呢？下面小编给大家带来了BootStrap中关于Select下拉框选择触发事件及扩展，需要的朋友参考下吧
Select下拉框的问题，想在选择一个选项后，前台显示做出变动，并且知道选择的是第几个选项。
这个很好解决：
&div class="page-header"&
&div class="form-horizontal"&
&div class="control-label col-lg-0"&
&div class="col-lg-2"&
&select class="form-control" onchange="selectOnchang(this)"&
&option&所有申请商家&/option&
&option&待审核商家&/option&
&option&未通过审核商家&/option&
&option&已通过审核商家&/option&
function selectOnchang(obj){
//获取被选中的option标签选项
alert(obj.selectedIndex);
这里利用的就是onchange和selectedIndex。
onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。
selectedIndex: 设置或返回下拉列表中被选项目的索引号。
这样，在我们改变选项时就会触发改事件。
这样做，我们只能获得选中哪项，而如果我们选中哪项，需要传递特殊的信息，这个时候该怎么办呢。
&div class="page-header"&
&div class="form-horizontal"&
&div class="control-label col-lg-0"&
&div class="col-lg-2"&
&select class="form-control" onchange="selectOnchang(this)"&
&option value="all"&所有申请商家&/option&
&option value="check_pending"&待审核商家&/option&
&option value="no"&未通过审核商家&/option&
&option value="yes"&已通过审核商家&/option&
也就是说，我在选中的同时，想获得那个value值，这个时候怎么做。
这里只用一种方法实现，其他的方法应该还有很多。
function selectOnchang(obj){
var value = obj.options[obj.selectedIndex].
alert(value);
效果图如下:
以上所述是小编给大家介绍的BootStrap中关于Select下拉框选择触发事件及扩展，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具您当前所在位置：&>>&&>>&正文
本教程章节列表
ComboBox（下拉列表框）
创建时间：日 09:10&&阅读次数：(10538)
ComboBox（下拉列表框）
扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。
下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。
通过&select&元素创建一个预定义结构的下拉列表框。
&id="cc"&class="easyui-combobox"&name="dept"&style="width:200"&&
&&&&&value="aa"aitem1&&
&&&&bitem2&&
&&&&bitem3&&
&&&&ditem4&&
&&&&eitem5&&
通过&input&标签创建下拉列表框。
&id="cc"&class="easyui-combobox"&name="dept"&&
&&&&data-options="valueField:'id',textField:'text',url:'get_data.php'"&&&
使用Javascript创建下拉列表框。
&id="cc"&name="dept"&value="aa"&&
$('#cc').combobox({ &&
&&&&url:'combobox_data.json', &&
&&&&valueField:'id', &&
&&&&textField:'text'&&
创建2个有依赖关系的下拉列表框。
&id="cc1"&class="easyui-combobox"&data-options="
&&&&&&&&valueField:&'id',
&&&&&&&&textField:&'text',
&&&&&&&&url:&'get_data1.php',
&&&&&&&&onSelect:&function(rec){
&&&&&&&&&&&&var&url&=&'get_data2.php?id='+rec.
&&&&&&&&&&&&$('#cc2').combobox('reload',&url);
&&&&&&&&}"&&&
&id="cc2"&class="easyui-combobox"&data-options="valueField:'id',textField:'text'"&&&
JSON数据格式化例子：
&&&&"id":1, &&
&&&&"text":"text1"&&
&&&&"id":2, &&
&&&&"text":"text2"&&
&&&&"id":3, &&
&&&&"text":"text3", &&
&&&&"selected":true&&
&&&&"id":4, &&
&&&&"text":"text4"&&
&&&&"id":5, &&
&&&&"text":"text5"&&
下拉列表框属性扩展自(自定义下拉框)，下拉列表框新增的属性如下：
属性值类型
valueField
基础数据值名称绑定到该下拉列表框。
基础数据字段名称绑定到该下拉列表框。
groupField
指定分组的字段名称（译者注：分组的字段由数据源决定）。（该属性自1.3.4版开始可用）
groupFormatter
function(group)
返回格式化后的分组标题文本，以显示分组项（该属性自1.3.4版开始可用）
代码示例：$('#cc').combobox({
groupFormatter: function(group){
return '&span style="color:red"&' + group + '&/span&';
定义了当文本改变时如何读取列表数据。设置为'remote'时，下拉列表框将会从服务器加载数据。当设置为“remote”模式时，用户输入将被发送到名为'q'的HTTP请求参数到服务器检索新数据。
通过URL加载远程列表数据。
HTTP方法检索数据(POST / GET)。
数据列表加载。&
代码示例：&input class="easyui-combobox" data-options="
valueField: 'label',
textField: 'value',
label: 'java',
value: 'Java'
label: 'perl',
value: 'Perl'
label: 'ruby',
value: 'Ruby'
定义当'mode'设置为'local'时如何过滤本地数据，函数有2个参数：q：用户输入的文本。row：列表行数据。返回true的时候允许行显示。
代码示例：$('#cc').combobox({
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0;
定义如何渲染行。该函数接受1个参数：row。
代码示例：$('#cc').combobox({
formatter: function(row){
var opts = $(this).combobox('options');
return row[opts.textField];
function(param,success,error)
定义了如何从远程服务器加载数据。返回false可以忽略该动作。该函数具备如下参数：param：传递到远程服务器的参数对象。success(data)：在检索数据成功的时候调用该回调函数。error()：在检索数据失败的时候调用该回调函数。
json loader
loadFilter
function(data)
返回过滤后的数据并显示。（该属性自1.3.3版开始可用）
下拉列表框事件继承自(自定义下拉框)，下拉列表框新增的事件如下：
onBeforeLoad
在请求加载数据之前触发，返回false取消该加载动作。
代码示例：// 在加载服务器数据之前改变http请求参数的值
$('#cc').combobox({
onBeforeLoad: function(param){
param.id = 2;
param.language = 'js';
onLoadSuccess
在加载远程数据成功的时候触发。
onLoadError
在加载远程数据失败的时候触发。
在用户选择列表项的时候触发。
onUnselect
在用户取消选择列表项的时候触发。
下拉列表框扩展自(自定义下拉框)，下拉列表框新增或重写的方法如下：
返回属性对象。
返回加载数据。
读取本地列表数据。
请求远程列表数据。通过'url'参数重写原始URL值。
代码示例：$('#cc').combobox('reload');
&&&&// 使用旧的URL重新载入列表数据
$('#cc').combobox('reload','get_data.php');
// 使用新的URL重新载入列表数据
设置下拉列表框值数组。
代码示例：$('#cc').combobox('setValues', ['001','002']);
设置下拉列表框的值。
代码示例：$('#cc').combobox('setValue', '001');
清除下拉列表框的值。
选择指定项。
取消选择指定项。
说明：所有来源为 .net学习网的文章均为原创，如有转载，请在转载处标注本页地址，谢谢！
【编辑：Wyf】
感谢您的支持，我会做的更好!
扫码打赏，您说多少就多少
发表评论：
请输入问题&&的结果(结果是：)