下拉框combobox用法&级联餐单

1、单个下拉框:

  <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);
                          }
                      }
                  }

              });
});

2、级联餐单:

 <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);
                          }
                      }
                  }
              });
});
时间: 2024-10-17 06:04:45

下拉框combobox用法&级联餐单的相关文章

Bootstrap下拉框 Combobox

Bootstrap下拉框 Combobox显示效果如下: 源代码: <select class="combobox"> <option></option> <option value="PA">Pennsylvania</option> <option value="CT">Connecticut</option> <option value="N

EXT学习之——Ext下拉框绑定以及级联写法

/*******步骤有四个,缺一不可*********/ function () {xxxxxx = Ext.extend(construct, {InitControl: function () { var _this = this; /*****************步骤一:建数据store ******************/ //一级下拉框数据(此处注意,一定要把store写在combobox控件定义的前面,否则无法加载数据) var moduleStore = new Ext.da

基于jquery扩展漂亮的下拉框——ComboBox

关于web前端自定义控件——ComboBox(下拉框),以往我在使用下拉框控件老是为了样式丑陋而烦恼,现在分享这个控件,希望有用的同仁们可以收藏,或进行二次修改,达到你想要的效果. 分解自定义下拉框: 1.创建构造函数,初始化赋值控件值. 2.绑定控件呈现在前台. 3.点击下拉框控件,展示下拉列表 4.点击触发下拉框控件,收起下拉列表. 5.点击下拉项触发事件. 代码如下: Html代码: 1 <b class="select_type"></b> css样式:

下拉框-ComboBox

<ComboBox Name="cbBox" SelectionChanged="cbBox_SelectionChanged"></ComboBox> ComboBoxItem item = new ComboBoxItem();item.Name = voice.DisplayName;item.Tag = voice;item.Content = voice.DisplayName + " (Language: "

雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务器. 在本教程中,我们将要创建一个注册表单,带有 name.address.city 字段.city 字段是一个树形下拉框(ComboTree)字段,在里面用户可以下拉树面板(tree panel),并选择一个特定的城市. 创建表单(Form) title="Register" butto

一句话美化你的下拉框之jQuery.selectMM插件

之前很喜欢 jquery.Dropkick 这个老外美化框插件,但是:IE情况下如果数据多滚动条出现的时候就滚不了,作者也没修复 于是准备自己写一款(确切的说是修改一款吧!!).这款插件是在16素材网上看到:http://www.16sucai.com/2011/08/9184.html (jquery用ul模拟表单select列表菜单效果)后突然发觉好看想用于项目而修改而成的.在此感谢原作者先(你的美化框让我有修改的冲动) 将其修改了很多东西: 1.修改成插件形式,至少情况下可以用一句话就修改

绑定下拉框值和显示的好办法

开发中经常要用到下拉框ComboBox 而下拉框经常需要绑定值和显示值不同的情况 即Value和Text是不同的值 这时候是比较头痛的 最近发现了一个比较好用的办法 利用EntryDictionary的ArrayList链绑定数据 然后分别设置ComboBox的ValueMember和DisplayMember就可以了 代码如下: //声明下拉框控件 ComboBox cbb = new ComboBox(); //声明ArrayList ArrayList list = new ArrayLi

框架 day50 BOS项目 4 批量导入(ocupload插件,pinyin4J)/POI解析Excel/Combobox下拉框/分区组合条件分页查询(ajax)/分区数据导出(Excel)

知识点: 批量导入(ocupload插件,pinyin4J /POI解析Excel(apache POI) /区域分页查询 /Combobox下拉框 /分区组合条件分页查询(ajax) /分区数据导出(Excel下载) BOS项目笔记第4天 1.    区域批量导入功能 *Ajax不支持文件上传. *上传并且不刷新上传页面原理: Target到一个0,0,0的隐藏iframe里,造成一个没有刷新的假象 <form target="myIframe" action="ab

Struts2 &lt;s:doubleselect&gt;级联下拉框 详解析

运行环境:myeclipse8.6+jboss5.1+jvm1.6 先看最后目录结构: 直接上源码: complexFormTag.jsp: <%@ page language="java" contentType="text/html; charset=gb2312"pageEncoding="gb2312"%> <%@ taglib prefix="s" uri="/struts-tags&qu