easyui-combobox

梦里梦外; 2022-07-15 13:19 305阅读 0赞 
  1. 在做功能的时候用到easyui的combobox，下拉框经常使用，因此把它的使用方法简单总结如下：
  3. html代码部分：
  5. <pre name="code" class="html"><select class="easyui-combobox" id="fruit" 
  6.         data-options="editable:false"
  7.     style="height: 25px; width: 148px"
  8.     align="center" > 
  9.     <option value="banana">香蕉</option>
  10.     <option value="orange">橘子</option>
  11.     <option value="apple">苹果</option>
  12. </select>
  14. 1、combobox改变选中值触发事件：
  16. onSelect事件：
  18. $().ready(function(){ 
  19.     $("#fruit").combobox({
  20.         editable : false, // 不可编辑状态
  21.         cache : false,
  22.         panelHeight : '150',// 自动高度适合
  23.         onSelect : function() {
  24.         //改变选中值后的操作...
  25.         }
  26.     })
  27. });
  29. 或者onChange事件；
  31. $('#fruit').combobox({
  32.     onChange:function(newValue,oldValue){
  33.         alert(newValue);
  34.     }
  35. });
  40. 2、combobox设置默认选中项：
  42. $('#fruit').combobox('select',"苹果");
  47. 3、combobox获取选中项的value值：
  49. $("#fruit").combobox("getValue");
  54. 4、combobox获取选中项的text值：
  56. $("#fruit").combobox("getText");
  61. 5、combobox设置不可用  
  64. $('#fruit').combobox('disable');   //设置不可用

小结：

  1. 常用easyui样式不仅基本使用要会，与其他样式组合使用也要会。
  3. 多看官网，高效、原汁原味。

发表评论

表情：
评论列表 （有 0 条评论，305人围观）

还没有评论，来说两句吧...

相关阅读