下拉框combobox用法&級聯餐單

若是下來內容不用後臺取數據，直接寫死的話不用url屬性，直接用data便可：

 <input id="orderstate" name="orderstate" class="easyui-combobox" />

$(function(){
$("#orderstate").combobox({
                valueField: 'id',
                textField: 'text',
                width: 80,
                autoShowPanel: true,
                data: [{ id: -1, text: '支付結果' }, { id: 1, text: '成功' }, { id: 0, text: '失敗' }],
                onLoadSuccess: function () {
                    var val = $(this).combobox('getData');
                    if (val != null && val.length > 0) {
                        $(this).combobox('select', val[0]["id"]);//val[0].id也能夠
                    }

                }
            });
});

 

一、單個下拉框：

  <td> <input id="waytype" name="waytype"   class="easyui-combobox" /></td>

 $(function () {
              var _actiontype = $('#waytype').combobox({
                  type: "GET",
                  dataType: 'json',
                  url: "/xxxx/xxxx.json",
                  editable: false,
                  valueField: 'id',
                  textField: 'text',
                  onSelect: function (record) {
                  },
                  onLoadSuccess: function (data) {
                      if (data.length == 0) {
                          $.messager.alert("系統提示", "數據庫異常，請聯繫管理員！", "warning");
                      } else {
                          var data1 = $('#waytype').combobox('getData');  //賦默認值
                          if (data1.length > 0) {
                              $("#waytype").combobox('select', data1[0].actionid);
                          }
                      }
                  }

              });
});

二、級聯餐單：

 <td> <input id="actiontype" name="actiontype"   class="easyui-combobox" style="width:80px" /></td>
 <td> <input id="waytype" name="waytype"   class="easyui-combobox" /></td>

 $(function () {
              var _actiontype = $('#actiontype').combobox({
                  type: "GET",
                  dataType: 'json',
                  url: "/xxx/xxx.json",
                  editable: false,
                  valueField: 'actionid',
                  textField: 'actionname',
                  onSelect: function (record) {
                      //如下是根據第一個餐單選擇值不一樣而去獲取不一樣的二級連餐單，若是隻是簡單的根據第一個餐單值而去獲取對應的數據源，不須要判斷直接獲取就ok了
                      if (record.actionid == "get") {
                          _waytype.combobox({
                              disabled: false,
                              url: '/xxx/GetWayTypeJson1',
                              valueField: 'id',
                              textField: 'text'
                          }).combobox('clear');
                      }
                      else {
                          _waytype.combobox({
                              disabled: false,
                              url: '/xxx/GetWayTypeJson2',
                              valueField: 'id',
                              textField: 'text'
                          }).combobox('clear');
                      }
                  },
                  onLoadSuccess: function (data) {
                      if (data.length == 0) {
                          $.messager.alert("系統提示", "數據庫異常，請聯繫管理員！", "warning");
                      } else {
                          var data1 = $('#actiontype').combobox('getData');  //賦默認值
                          if (data1.length > 0) {
                              $("#actiontype").combobox('select', data1[0].actionid);
                          }
                      }
                  }

              });
              var _waytype = $('#waytype').combobox({
                  editable: false,
                  disabled: false,
                  valueField: 'id',
                  textField: 'text',
                  onLoadSuccess: function (data) {
                      if (data.length == 0) {
                          $.messager.alert("系統提示", "數據庫異常，請聯繫管理員！", "warning");
                      } else {
                          var data1 = $('#waytype').combobox('getData');  //賦默認值
                          if (data1.length > 0) {
                              $("#waytype").combobox('select', data1[0].id);
                          }
                      }
                  }
              });
});