jQuery MiniUI 开发教程 表单控件 ComboBox：上拉选择框（九） - Web前端当前位置:& &&&jQuery MiniUI 开发教程 表单控件 ComboBox：上拉选jQuery MiniUI 开发教程 表单控件 ComboBox：上拉选择框（九）&&网友分享于：&&浏览：32次jQuery MiniUI 开发教程 表单控件 ComboBox：下拉选择框（九）
ComboBox：下拉选择框参考示例：ComboBox：下拉选择框创建ComboBox&input id="combo1" class="mini-combobox" style="width:150" textField="text" valueField="id" &&& url="../data/countrys.txt" value="cn" showNullItem="true" /& 多选 + 多列&div class="mini-combobox" style="width:250"& popupWidth="400" textField="text" valueField="id" &&& url="../data/countrys.txt" value="cn,usa" multiSelect="true" &&&&& &&& &div property="columns"&&&&&&&& &div header="ID" field="id"&&/div&&&&&&&& &div header="国家" field="text"&&/div&&&& &/div&&/div&
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有在用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
阅读(...) 评论()MiniUi绑定mini-combobox下拉框
时间： 20:18:41
&&&& 阅读：797
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&一：最先开始使用json字符串绑定combobox
[{"id":1,"value":"是","text":"是"},{"id":0,"value":"否","text":"否"}]
然后我忘记json字符串的格式了，id属性没有加"" ，combobox一直绑定不上数据，而且请注意text属性是combobox的显示值，value属性不是显示值
二：combobox的前端界面是
&input id="InUse" class="mini-combobox" url="@Url.Action("GetInUse")" style="width:150" textfield="text"
shownullitem="true" allowinput="true" /&
而action里返回JsonResult或者string格式都可以
public JsonResult GetInUse()
List&JsonData& list = new List&JsonData&();
list.Add(new JsonData() { id = <span style="color: #, text = "是" });
list.Add(new JsonData() { id = <span style="color: #, text = "否" });
return Json(list, JsonRequestBehavior.AllowGet);//这里使用的是get请求
public string GetInUse()
List&JsonData& list = new List&JsonData&();
list.Add(new JsonData() { id = <span style="color: #, text = "是" });
list.Add(new JsonData() { id = <span style="color: #, text = "否" });
JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
jsonSerializer.Serialize(list);
三：除了使用MVC提供的&url="@Url.Action("GetInUse")" 的方式，还可以在页面加载的时候使用JavaScript为下拉框赋值
&script type="text/javascript"&
var InUse = mini.get("InUse");
url: ‘@Url.Action("GetInUse")‘,
type: ‘get‘,
contentType: "application/json",
success: function (jsonData) {
if (jsonData) {
InUse.load(jsonData);
$(document).ready(function () {
var jsonData = [{ ‘id‘: ‘<span style="color: #‘, ‘text‘: ‘是‘ }, { ‘id‘: ‘<span style="color: #‘, ‘text‘: ‘否‘ }];
mini.get("InUse").load(jsonData);
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！相关文章推荐
linux安装mysql：
1.yum安装默认的是5.1版本，如果版本不支持，可以到mysql官网下载新的mysql YUM源为rpm文件；
2.将下载的yum安装文件放到linux系统文件下（任意文...
缓存的作用：提高效率，减少频繁的操作。
生活中的缓存例子：生活中用货车拉货物可以看做是一个使用缓存的例子，我们把货物都一起装好在货车先，再一起拉到目的地去。如果不使用缓存，货物一件...
功能：让查询的表格某一列显示为蓝色链接字样，并且，点击打开新的标签页面，显示点击的某行记录的详细内容
第一步：给表格列数据动态加载一层标签，让该列显示为蓝色超链接状态
Miniui，框架，案例，代码
批量导入(ocupload插件,pinyin4J)/POI解析Excel/区域分页查询/Combobox下拉框/分区组合条件分页查询(ajax)/分区数据导出(Excel下载)...
Ext.Loader.setConfig({
对于最近的使用中，给我的感觉就是，借用官网JqueryEasyUI上的一句话，EasyUI是基于JQuery用户界面插件的集合，我把它理解成一种插件，不知道有没有问题。而使用easyui，不需要写很多...
点击打开链接
由于业务需要，在原有程序的基础上需要增加几项新的功能。主程序是没有顶部菜单的MDI窗口，考虑在多视环境下的操作实现比较麻烦，故采用主框架响应组合框的消息函数。
创建ComboBox...
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)