<div>
  <select id="selectSM">
    <option>选择A</option>
    <option>选择B</option>
    <option>选择C</option>
  </select>
</div>

必要表达:

步骤五:那里捎带说一下,怎么样拿到select下拉列表选用的值 

  注意:那里运用的是jQuery、ajax,别的办法也落实。

  之前使用的select下拉列表都以静态的,select
的option数据都是写死的。今后项目中的select需求依照不一致的情况使用区其余数量,消除方法就是动态加载option数据。

public JSONObject getItemDepartList(HttpServletRequest request) throws Exception{

  //查询select数据
  List<Map<String, Object>> list = appServices.getAppList();
  System.out.println("list::::::::" + list);
  //获取数据存放到数组
  String[] depart = null;
  for (Map<String, Object> map : list) {
    for (String k : map.keySet()) {
      depart = ((String) map.get(k)).split(",");

      System.out.println("depart::::::::" + depart);
      }
    }
  //去除数组中重复数据,存放到list
  List<String> strList = new ArrayList<String>();
  for (int i=0; i<depart.length; i++) { 
    if(!strList.contains(depart[i])) { 
    strList.add(depart[i]); 
  } 
}

  System.out.println("strList::::::::" + strList);
  jsonObject.put("rows", strList);
  return jsonObject;

}

步骤三:后台数据的拍卖。

手续四:sql查询语句,这里是把差异字段的值举行拼接,再次回到到controller中的list中。 

SELECT GROUP_CONCAT(DISTINCT CONCAT(字段名称)) AS 字段名称或别名 FROM 表名

    贰 、select有二种写法,那里是最简易的。

代码部分:

  注意:

    list::::::::[{service_depart=A,B,C,D,E,A,C,D,D,E}]
    depart::::::::[Ljava.lang.String;@41fc702b
    strList::::::::[A, B, C, D, E]
 //select 的change事件用了获取下拉列表的值
 $(document).on("change","#selectSM",function(){
    //获取选择的值
    var condition = $(this).val();
    //其他操作
  });

    一 、静态的select在好几场景下行使是不曾难题的。但是在成品差其他须要时,动态select更能独当一面其二种性。

function IninDepart(){
  $("#selectSM").remove();//清空select列表数据
  var state = 1;
  $.ajax({
    type : "POST",
    url : "<%=basePath%>/getItemDepartList.do",
    dataType : "JSON",
    data : {},
  success : function(msg) 
  {

    $("#selectSM").prepend("<option value='0'>请选择</option>");//添加第一个option值
    for (var i = 0; i < msg.rows.length; i++) {

    //如果在select中传递其他参数,可以在option 的value属性中添加参数
    //$("#selectSM").append("<option value='"+msg.rows[i].id+"'>"+msg.rows[i]+"</option>");

    $("#selectSM").append("<option>"+msg.rows[i]+"</option>");
  }

  },error:function(){
  alertLayer("获取数据失败","error");
  }
  });
}

  注意:由于后台再次回到数据的题材,必要对数据开展截取并剔除重复数据。如果没有那一个须求,可以直接向前端再次回到三个数组或list即可。下边是差异数量的操纵台出口:

总括:不相同的必要对应着不一样的数量处理和突显情势。以及差其他代码落成格局那里介绍本身要好的眼光。

上边步骤介绍了哪些从数据库获取数据,并动态的在前者显示。

手续一:jsp页面静态的select:

手续二:jQuery通过ajax请求获取动态的多少,并在jsp页面呈现。

相关文章

网站地图xml地图