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

最新推荐文章于 2020-07-22 02:02:27 发布

java1024家园

最新推荐文章于 2020-07-22 02:02:27 发布

阅读量604

点赞数

分类专栏：技术篇文章标签：下拉框 option数据填充下拉框数据填充动态加载下拉框

本文链接：https://blog.csdn.net/weixin_41254252/article/details/91445028

版权

技术篇专栏收录该内容

7 篇文章 0 订阅

订阅专栏

对下拉框数据填充提供统一的解决办法

具体实现代码方案如下

具体实现代码方案如下

你在网站开发过程中在网站开发中，有很多地方需要用到下拉选择数据的，一般是采用异步加载的方式去数据库加载数据，然后填充数据！这种场景比如说写博客的时候选择博客类型、还有其他的选择条件等等，其他就不一一列举了。今天笔者提供一个通用的代码，帮你轻松处理这个业务！方法是定义一个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 $s e l e c t =$ ("");
$s e l e c t . a p p e n d ($ ("—请选择----"));
//dict_type_code 字典类型吗
$.get(
actionURL,
//{ dict_type_code: dict_type_code },
function(data){
for(var i=0;i<data.length;i++) {
//data[i]是第循环每一项项
var $o p t i o n =$ (""+data[i][c_name]+"");
if(data[i][c_id]==selectId) {
```
          		$option.attr("selected","selected");
          	}
          	$select.append($option);
          }
},"json");
```
//selectId 选择为的Id

//positionId 在哪个地方添加
$(p o s i t i o n I d) . a p p e n d ($ select);
}