关于easyui弹出两次onChange解决方案和其他的应用例子
2017-01-07 13:27
771 查看
< !DOCTYPE html > <html > <head > <meta charset = "UTF-8" > <title > Basic ComboBox - jQuery EasyUI Demo < /title> <link rel="stylesheet" type="text/css " href=".. / .. / themes / default / easyui.css "> <link rel="stylesheet " type="text / css " href=".. / .. / themes / icon.css "> <link rel="stylesheet " type="text / css " href=".. / demo.css "> <script type="text / javascript " src=".. / .. / jquery.min.js "></script> <script type="text / javascript " src=".. / .. / jquery.easyui.min.js "></script> <script type="text / javascript " > $(document).ready(function () { //增加一个自定义属性控制初始化的两次操作,oh yes $("#sTwo ").combobox({ stopFirstChangeEvent: true, onChange: function (n,o) {debugger; var options = $(this).combobox('options'); if(options.stopFirstChangeEvent) { options.stopFirstChangeEvent = false; return; } alert("我是老大 ! "); options.stopFirstChangeEvent = true; } }); }); $( function(){ var queryItemData = [{text : "产品名称", value : "prodName "}, {text : "年化收益率", value : "ars "}, {text : "到期收益率", value : "ytm "}, {text : "最低出借金额", value : "lowLendEdu "}, {text : "最高出借金额", value : "higLendEdu "}, {text : "出借周期", value : "lendingCycle "}, {text : "产品状态", value : "prodStatus "}]; var options01 = [{text : "等于", value : "eq "}, {text : "不等于", value : "ne "}]; var options02 = [{text : "等于", value : "eq "}, {text : "大于且等于", value : "ge "}, {text : "大于", value : "gt "}, {text : "小于且等于", value : "le "}, {text : "小于", value : "lt "}, {text : "不等于", value : "ne "}]; //初始化查询项目的下拉列表 $("#queryItem ").combobox({ valueField: 'value', textField: 'text', data : queryItemData, panelHeight:170, //注册Easy-UI, combobox的onSeclete事件 //目的:实现理财产品中,高级查询的“运算条件”随着“查询项目”的改变而发生联动。 onSelect : function(){ var myOptValue = $("#queryItem ").combobox("getValue ") ; //1.清空原来的operType这个combobox中的选项 $("#operType ").combobox("clear "); //2.动态添加"操作类型"的下拉列表框的option if( myOptValue != null && (myOptValue == 'prodName' || myOptValue == 'prodStatus') ){ console.info("myOptValue = "+myOptValue); $("#operType ").combobox({ panelHeight:50, data : options01 }); }else{ $("#operType ").combobox({ panelHeight:140, data : options02 }); } //3.清空文本输入框——用户输入的条件 $("#userInputCondition ").val(""); } , onShowPanel: function () { alert(); } }); //初始化operType的下拉列表 $("#operType ").combobox({ valueField: 'value', textField: 'text', data : options02, panelHeight:140, }); $("#sTwo ").keyup(function(){ alert($("#sone ").val()); }); }); function test(){ alert(); } </script> </head> <body> <table cellpadding="0 " cellspacing="1 " border="0 "> <tr> <td>选择查询项目:</td> <td><input id="queryItem " name="queryItem " class="easyui - combobox " style="width: 130px; " ></td> <!-- 用户选择运算条件 --> <td><input id="operType " name="operType " class="easyui - combobox " style="width: 90px; " data-options="panelHeight: 150 "/></td> <!-- 用户输入文本条件 --> <td><input id="userInputCondition " name="userInputCondition " type="text " style="width: 200px; "></input></td> </tr> </table> <h2>Basic ComboBox</h2> <p>Type in ComboBox to try auto complete.</p> <div style="margin: 20px 0 "></div> <input type="text " id="sTwo " > <input type="text " id="sone " onchange="test()"> <select class="easyui - combobox " name="state " style="width: 200px; "> <option value="AL ">Alabama</option> <option value="AK ">Alaska</option> <option value="AZ ">Arizona</option> <option value="AR ">Arkansas</option> </select> </body> </html>"//销毁组件
///$('#xxx').combobox('destroy');
//隐藏选项
//$('#xxx').combobox('hidePanel');
相关文章推荐
- html 应用 ajaxupload 文件控件 onchange 只能改变一次 解决方案
- 关于textarea的应用--onchage,onpropertychange,oninput
- Easyui弹出Dialog时,Dialog中的Combobox的url会加载两次,不明原因,只能其他方法解决。
- (MFC)关于点击窗口1的button弹出对话框2,关闭对话框2,需要点击两次对话框1的button才能弹出对话框2的问题
- 关于onBlur,onChange,onClick,OnKeyDown,OnKeyUp,OnKeyPress,OnMouseEnter,OnMouseDown等
- 关于手机应用的一些解决方案
- 关于Apache: [warn] _default_ VirtualHost overlap on port 80, the first has precedence Error and Solution的解决方案
- 关于onBlur,onChange,onClick,OnKeyDown,OnKeyUp,OnKeyPress,OnMouseEnter,OnMouseDown等
- 关于java的synchronized关键字,wait(),notify() 的例子,方便大家快速理解和应用。
- asp.net关于onpropertychange和oninput事件实现代码
- 关于 Eclipse3.2 弹出内存不足的解决方案
- 关于onreadstatechange的含义
- XML,Dictionary的应用---有关于页面之间接收和传递参数的又一解决方案 [原创]
- 【硬件】关于显示器自动弹出显示菜单的解决方案
- 关于cisco3560跟其他品牌交换机水土不服的解决方案
- 关于C#服务里面的OnSessionChange
- 关于C#2.0泛型应用的一个小例子
- 写个简单的关于Filter过滤器应用的例子
- 关于ajax应用中session过期问题的几个解决方案
- 关于textbox中的TextChanged与客户端事件onpropertychange的组合