城东小巷分享 http://blog.sciencenet.cn/u/chengdong166

博文

jQuery-easyUi之combobox Demo

已有 28684 次阅读 2013-8-15 20:54 |个人分类:jQuery学习|系统分类:科研笔记| jquery, EasyUI, Combobox

      combobox在默认情况下是一种可编辑的下拉框,通过multiple属性设置该组件为单选(默认情况下为false,单选)还是多选。创建combobox组件的常见示例如下:

一种是通过<input>方式:

<input id="state"
    class="easyui-combobox"
    name="state"
    url="../combobox/action_combobox_data.json"
    valueField="id"
    textField="text"
    multiple=true
    editable=false
    panelHeight="auto"
    style="width:200px;">

另外一种是通过javascript的方式:

<input id="cc" name="cc" value="cc">

$(function(){
  // 继承于combo也就是说具有combo的一切属性和方法,包括事件
  $("#cc").combobox({
   url:"../combobox/action_combobox_data.json",
   textField:"text",
   valueField:"id",
   multiple:false,
   editable:false,
   panelHeight:"auto",
   width:200,
   onChange:function(oldVal, newVal) {
    debugger;
    alert(oldVal);
    alert(newVal);
    $(this).data("oldVal", oldVal);
   },
   onSelect:function(rec) {

    // 这里起到下拉框连带(dependent comboboxes)的效果。
    var url="../combobox/combobox_data1.json"
    $("#dd").combobox("reload", url);
    var oldVal = $(this).data("oldVal")
    alert(oldVal);
   }
  });
 
 });

其中json文件如下:

[{
"id":"AL",
"text":"Alabama"
},{
"id":"AK",
"text":"Alaska"
},{
"id":"AZ",
"text":"Arizona",
"selected":true
},{
"id":"AR",
"text":"Arkansas"
},{
"id":"CA",
"text":"California"
}]

 

    总结:由于combobox继承于combo组件,因此具有combo的一切属性和方法,包括事件,例如onChange事件(比如上例方式二)。

 

参考资料:

1、http://www.jeasyui.com/documentation/index.php#



https://blog.sciencenet.cn/blog-448935-717139.html

上一篇:JDBC(1)
下一篇:jQuery-easyui之validatebox学习
收藏 IP: 122.82.42.*| 热度|

0

该博文允许注册用户评论 请点击登录 评论 (0 个评论)

数据加载中...

Archiver|手机版|科学网 ( 京ICP备07017567号-12 )

GMT+8, 2024-6-26 14:00

Powered by ScienceNet.cn

Copyright © 2007- 中国科学报社

返回顶部