easyUI combobox实现联动效果_JavaScript

我在做项目时，经常用到easyui框架，今天总结一下easyui中的combobox吧
创建easyui-combobox的方法，在easyui的官网都有：

1、从带有预定义结构的元素创建组合框（combobox）

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
  <option value="aa">aitem1</option>
  <option>bitem2</option>
  <option>bitem3</option>
  <option>ditem4</option>
  <option>eitem5</option>
</select>

2、从标记创建组合框（combobox）

<input id="cc" class="easyui-combobox" name="dept"
data-options="valuefield:'id',textfield:'text',url:'get_data.php'">

3、使用 javascript 创建组合框（combobox）

$('#cc').combobox({
  url:'combobox_data.json',
  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"
}]

它的属性和方法就不在赘述了，可以上官网查看。
下面来说一下关于两个combobox发联动

//初始化下拉列表
function initcombobox() {
  $("#combobox_one").combobox({
    onloadsuccess: function(){
      var types = $("#combobox_one").combobox('getdata');
      if (types.length > 0){ 
        $("#combobox_one").combobox('select', types[0].value); //全部
      }
    }
  });
  $("#combobox_two").combobox({ 
    url:'...';
    onloadsuccess: function(){ 
      var types = $("#combobox_one").combobox('getdata');
      if (types.length > 0){ 
        $("#combobox_two").combobox('select', types[0].value); //全部
      }
    },
    onselect: function(record){ 
      var url = '...' + record.value;
      $("#combobox_one").combobox('reload', url);
    }
  });

 $(function() {
  var typedata = [{
    text: "来源",
    value: "prodname"
  }, {
    text: "排放",
    value: "ars"
  }];
  var options01 = [{
    text: "生活污水",
    value: "eq"
  }, {
    text: "工业用水",
    value: "ne"
  }];
  var options02 = [{
    text: "工业用水",
    value: "ne"
  }, {
    text: "生活垃圾",
    value: "ge"
  }];
  //初始化查询项目的下拉列表
  $("#type").combobox({
    valuefield: 'value',//值字段
    textfield: 'text',//显示的字段
    data: typedata,
    panelheight: 170,
    onselect: function() {
      var myoptvalue = $("#type").combobox("getvalue");
      //1.清空原来的classify这个combobox中的选项
      $("#classify").combobox("clear");
      //2.动态添加"操作类型"的下拉列表框的option              
      if (myoptvalue != null && (myoptvalue == 'prodname' || myoptvalue == 'prodstatus')) {
        console.info("myoptvalue = " + myoptvalue);
        $("#classify").combobox({
          panelheight: 50,
          data: options01
        });
      } else {
        $("#classify").combobox({
          panelheight: 140,
          data: options02
        });
      }
      //3.清空文本输入框——用户输入的条件              
      //$("#userinputcondition").val("");
    }
  });
  //初始化classify的下拉列表
  $("#classify").combobox({
    valuefield: 'value',
    textfield: 'text',
    data: options02,
    panelheight: 140,
  });
});

下面是一个关于省市区的联动：

var h = $(window).height() * 0.65;
// 省级 
$('#province').combobox({
  valuefield: 'name', //值字段
  textfield: 'name', //显示的字段
  url: '/tidewayshpserver/area/findallprovince',//url为java后台查询省级列表的方法地址
  panelheight: h,
  editable: true,
  //模糊查询
  filter: function(q, row) {
    var opts = $(this).combobox('options');
    return row[opts.textfield].indexof(q) == 0; //从头匹配,改成>=即可在任意地方匹配
  },
  onselect: function(rec) {
    $('#city').combobox('setvalue', "");
    $('#county').combobox('setvalue', "");
    var url = '/tidewayshpserver/area/findallcity?parentid=' + rec.areaid;//url为java后台查询事级列表的方法地址
    $('#city').combobox('reload', url);
  }
});
//市区 
$('#city').combobox({
  valuefield: 'name', //值字段
  textfield: 'name', //显示的字段       
  panelheight: 'auto',
  editable: false, //不可编辑，只能选择
  value: '',
  onselect: function(rec) {
    $('#county').combobox('setvalue', "");
    var url = '/tidewayshpserver/area/findalldistrictorcounty?parentid=' + rec.areaid;//url为java后台查询区县级列表的方法地址
    $('#county').combobox('reload', url);
  }
});
//区 县
$('#county').combobox({
  valuefield: 'areaid',
  textfield: 'name',
  panelheight: 'auto',
  editable: false,
});

基本上想写的都写完了，主要是多个combobox的联动效果，写的不完美大家相互学习一下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。