easyui combobox实现下拉框获取后端数据并多选和取值，实现textbox的隐藏框

前文

  需求是在进入表单时，展示下拉框数据，数据从后端获取，并支持多选，最后再提交表单把数据传回给后端。虽然combobox可以支持用url请求后端，但因为form包含多个下拉框，不可能每个都自己去请求，所以直接通过ajax统一获取，至于多选则通过增加multi属性即可，最后通过getvalues获取键值提交即可。接下来会细说。

ajax实现combobox获取后端数据

  前端代码如下：

<form>
     <div style="padding:5px;margin-left:10px;margin-top:10px">
         <input class="easyui-textbox" id="task_id" style="width:330px;" prompt="任务号" readonly="readonly" disabled="disabled">   //定义任务id是不可见的
     </div>
     <div style="padding:5px;margin-left:82px;margin-top:20px;">
         <label>下拉框1：</label><input id="id1" style="width: 250px" class="easyui-combobox">
     </div>
     <div style="padding:5px;margin-left:82px;margin-top:20px;">
         <label>下拉框2：</label><input id="id2" style="width: 250px" class="easyui-combobox">
     </div>
     <div style="padding:5px;margin-top:20px;">
         <input class="easyui-textbox" id="task_info" style="width:390px" data-options="required:true" label="任务信息:" labelWidth="140px" labelAlign="right">
     </div>
</form>
<div data-options="region:'south'" style="height:50px;">
       <div style="padding: 20px; text-align:right;">
            <a href="javascript:void(0)" class="easyui-linkbutton" "submit_form()" style="width:80px">提交</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" "close_form()" style="width:80px">关闭</a>
        </div>
</div>

  在form表单定义了两个下拉框，一个隐藏框，隐藏框在easyui的实现我也是取巧的，因为我发现正常用hidden、disabled是不够的，还需要配合js才能完成($("#task_id").next().hide()?，详细看下代码(仅展示ajax部分)：
  关于combobox的valueField和textField需要解释下，这就相当于有label和value，也就是form表单的name和value，前者指代参数，后者指代显示的值，所以我们在获取值的时候，就有getValue和getValues获取valueField里的值，getText就可以相应获取框框里显示的值。

$.ajax({
          url: '/url/',
          type: 'get',
          dataType: 'json',
          success: function (data) {
              var task_id = data.task_id;
              $("#task_id").textbox('setValue', task_id);
              $("#task_id").next().hide();
              $("#id1").combobox({
                  valueField: 'label',
                  textField: 'value',
                  multiple:true,
                  required: true,
                  data: data.db_list
              });
              $("#id2").combobox({
                  valueField: 'label',
                  textField: 'value',
                  multiple:true,
                  required: true,
                  data: data.db_list
              })
          }
      })

  那后端我是用Django写的，这边也简单展示下后端代码，显示返回的格式：

def userpriv_apply(request):
    """
    生成权限申请表单数据
    :param request:
    :return:
    """
    task_id = get_task_id()
    db_list_data = []
    try:
    	#获取数据集合
        db_list =  MySQLDBInfo.objects.filter(country=country,env=env).values("dbname","index")
    except Exception as e:
        logger.error(e)
        print(e)
    for db in db_list:
        tmp = {"label":db["index"], "value":db["dbname"]}
        print(tmp)
        db_list_data.append(tmp)
    data = {}
    data["task_id"] = task_id
    data["db_list"] = db_list_data
    return HttpResponse(json.dumps(data, ensure_ascii=False), content_type="application/json")

  ok，这样就可以得到在表单初始化的时候，通过ajax向后台得到combobox的数据。那填写表单后，提交时要如何获得combobox的数据？因为是多选，所以要用getValues，但getValues得到的是数组，所以需要转为json格式(JSON.stringify)，再用ajax传到后端，这样后端能正常取到值，详细如下：

function submit_orm() {
            var taskid = $("#task_id").textbox('getValue');
            var db_list = $("#d1").combobox('getValues');
            var db_list2 = $("#d2").combobox('getValues');
            var task_info = $("#task_info").textbox('getValue');
            var data = {
                "taskid":taskid,
                "db_list":JSON.stringify(db_list),
                "db_list2":JSON.stringify(db_list2),
                "task_info":task_info
            };
            $.ajax({
                url:'/userpriv_submit/',
                type:'POST',
                dataType:'json',
                data:data,
                success: function (data) {
                    show_alert(data.msg)
                },
                fail:function (data) {
                    show_alert("网络原因，请重新提交！")
                }
            })
        }

总结

  分享到此结束，因为把一些变量名改了，所以可能会出现对不上号的情况，不过整体思路就是这样，比较简单~