下拉框填充方法——jquery统一封装

具体实现代码方案如下

你在网站开发过程中在网站开发中，有很多地方需要用到下拉选择数据的，一般是采用异步加载的方式去数据库加载数据，然后填充数据！这种场景比如说写博客的时候选择博客类型、还有其他的选择条件等等，其他就不一一列举了。今天笔者提供一个通用的代码，帮你轻松处理这个业务！方法是定义一个jquery方法，实现下拉框的初始化和数据动态填充！。

在js的combo.js定义CategorySelect（）方法

/*

• 封装一个下拉选择各种类别的方法。例如选择文章类型

• @selectId 被选中的id用于数据回显，一般用于更新时的数据回显

• @actionURL 后台处理action，异步请求链接，我这里用springmvc，其他语言修改响应即可

• @positionId 具体哪个位置加入下拉框，即页面中需要加下拉框的id或class

• @selectName对应引用类别的外键属性名字，相当于中的name属性的值，表单提交是有用

• @c_name类名的字段名子，用于从对象获取类名

• @c_id类ID的字段名字，用于从对象或类id
  */
  function CategorySelect(positionId,selectId,actionURL,selectName,c_name,c_id) {

  //alert(‘hhh’);
  var $select=$("");
  $select.append($("—请选择----"));
  //dict_type_code 字典类型吗
  $.get(
  actionURL,
  //{ dict_type_code: dict_type_code },
  function(data){
  for(var i=0;i<data.length;i++) {
  //data[i]是第循环每一项项
  var $option=$(""+data[i][c_name]+"");
  if(data[i][c_id]==selectId) {

            		$option.attr("selected","selected");
            	}
            	$select.append($option);
            }
  },"json");
  

  //selectId 选择为的Id

  //positionId 在哪个地方添加
  $(positionId).append($select);
  }

在需要下拉框的地方添加一个div 并给id

所在分组

引进combo.js脚本

调用定义好的方法

//填充班级下拉框 具体js代码请参考js下的combo.js
CategorySelect("#selgroups",null,"/usergroups/listforuser",“groupid”,“groupname”,“groupid”);

至此，一个动态的下拉框异步加载完美实现！有问题下方留言！！！

原文转载于: java1024家园.