zoukankan      html  css  js  c++  java
  • .net+easyui--combobox

    一:预定义结构的 select 元素创建组合框(combobox)值固定写死

    <select class="easyui-combobox" name="state" style=" 200px;">
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
           </select>

    效果图:

      二:使用 javascript 创建组合框(combobox) 动态加载

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

    JS代码:

    $('#cc').combobox({
                    url: 'test_list.aspx?id=1',
                    valueField: 'id',
                    textField: 'text'
                });

    C#后台代码:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (Request["id"] == "1")
                {
                    string josn =
               "[{                  " +
               "    "id":1,       " +
               "    "text":"text1"  " +
               "},{                 " +
               "    "id":2,         " +
               "    "text":"text2"  " +
               "},{                 " +
               "    "id":3,         " +
               "    "text":"text3", " +
               "    "selected":true " +
               "},{                 " +
               "    "id":4,         " +
               "    "text":"text4"  " +
               "},{                 " +
               "    "id":5,         " +
               "    "text":"text5"  " +
               "}]                  ";
    
                    Response.Clear();
                    Response.Write(josn);
                    Response.End();
                }
    
            }

    效果图:

    三:创建两个依赖的组合框(combobox) 联动效果:

    <input id="cc1" class="easyui-combobox" data-options="
        valueField: 'id',
        textField: 'text',
        url: 'test_list.aspx?id=1',
        onSelect: function(rec){
        var url = 'test_list.aspx?id='+rec.id;
        $('#cc2').combobox('reload', url);
        }">
            <input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'"></div>

     JS获取combobox值

     //取ID
    $('#cc').combobox('getValue');
    //取显示的name
    $('#cc').combobox('getText');
  • 相关阅读:
    Mysql 的安装(压缩文件)和基本管理
    Mysql 数据库安装与配置详解
    Bootstrap的插件
    Bootstrap学习
    移动端单位介绍
    响应式页面-@media介绍
    前端 ---jQuery的补充
    前端 ---- jQuery的ajax
    前端 ----轮播图实现
    安装scrapy时遇到的问题
  • 原文地址:https://www.cnblogs.com/huqian1210/p/5161092.html
Copyright © 2011-2022 走看看