easyui

<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

1、combobox

$(function(){

       $("#dd").combobox({url:"http://localhost:8080/WebClient20190722EasyUI/T02",

                                       valueField:"sid",

                                       textField:"sname",

                                       onSelect:function{//alert(rowData.sid);});//在用户选择列表项的时候触发。创建2个有依赖关系的下拉列表框。

       $("#dd").combobox("setValue","2");//设置下拉列表框值数组。

        $("#pp").combobox({url:"http://localhost:8080/WebClient20190722EasyUI/T02",

                                             valueField:"sid",//基础数据值名称绑定到该下拉列表框。

                                              textField:"sname",//基础数据字段名称绑定到该下拉列表框。

                                              groupField:"className",//指定分组的字段名称（译者注：分组的字段由数据源决定）。

                                              groupFormatter:function(group){//返回格式化后的分组标题文本，以显示分组项

                                                                                  if(group=="软件一班"){

                                                                                         return "<font color='red'>"+group+"</font>";

                                                                                  }else{

                                                                                         return "<font color='green'>"+group+"</font>";

                                                                                  }

                                                                         }

                                            });

    });

});

<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'sid',textField:'sname',url:'http://localhost:8080/WebClient20190722EasyUI/T02' " />

<input id="dd" name="dd" />

<input id="pp" name="pp" />

----------------------------------------------------------------------------

后台

List<Student> list=new ArrayList<Student>();

list.add(new Student(1,"杨玉环","软件一班"));

list.add(new Student(4,"诸葛亮","软件一班"));

list.add(new Student(2,"张三丰","软件二班"));

list.add(new Student(3,"曹操","软件二班"));

String str=JSON.toJSONString(list);

response.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

PrintWriter out=response.getWriter();

out.print(str);

out.flush();

out.close();

2、textbox

$(function(){    $("#tb").textbox({

         iconCls:'icon-search',//在文本框显示背景图标。

         iconAlign:'right',

        width:'600px',//组件的宽度。

         multiline:true,//定义是否是多行文本框。

         readonly:true

    });

    $("input[type='button']".click(function(){

        $("#tb").textbox("readonly",false);

        $("#tb").textbox("clear");//清除组件中的值。

    }));

});

<input class="easyui-textbox" data-options="iconCls:'icon-search',iconAlign:'left',readonly:true" style="width:300px">

<input id="tb" type="text" style="width:300px">

<input type="button">