JQuery根据url/json对象创建下拉框的方法的封装
(作者:杨先金;撰写时间:2019年5月23日)
一般情况下我们给某个下拉框绑定数据的时候,为了方便快速以及减少代码量,我们会专门给它封装一个函数,以便写代码的时候直接调用,在这里就有两种创建下拉框的方法:
1、JQuery根据url创建下拉框的方法的封装:
具体的代码如下图所示。
该函数有三个参数——
第一个参数fromId :form表单id(必须);
第二个参数url :查询下拉框的url(必须);
第三个参数value: 设置值(可写可不写)。
首先第一个参数是获取到form表单的id,第二个参数传入的是查询下拉框的url,在方法体内使用post请求,第二个参数作为请求路径到控制器请求数据,在此之前先判断一下传入的第一个参数是否却是id的属性,如果是,则利用JavaScript中的indexOf() 方法找到并拼接上一个“#”符合,然后在把该元素清空一下,避免下次调用的时候参数异常;
控制器请求到数据之后遍历一下请求回来的每一条数据,使用append()方法把一个标签追加到form表单id指向的下拉框元素的内部,每一条数据的id作为的value值,其文本text作为里面显示出来的文本;
设置选中值为该下拉框的初始值,可写可不写,如不写则默认为第一个下拉框的值;
下面是它的函数调用情况:
2、JQuery根据json对象创建下拉框的方法的封装:
具体的代码如下图所示。
同样,写法与上面的写法一模一样,只是参数有所不同而已。
该函数只有两个参数——
第一个参数fromId:为form表单id;
第二个参数jsonDate:为json对象。
还是获取到第一个参数form表单的id,第二个参数传入的是一个json对象,即事先到控制器请求到数据之后传回来的数组对象,这个数组对象为json格式。
同样地,在此之前先判断一下传入的第一个参数是否却是id的属性,如果是,则利用JavaScript中的indexOf() 方法找到并拼接上一个“#”符合,然后在把该元素清空一下,避免下次调用的时候参数异常。
直接遍历一下第二个参数,使用append()方法把一个标签追加到form表单id指向的下拉框元素的内部,每一条数据的id作为的value值,其文本text作为里面显示出来的文本。
较上面的根据url创建下拉框的方法而言,这种方法相当于把请求数据的步骤去掉,放在函数体外请求数据,再把请求回来的数据作为参数的形式。
下面是它的函数调用情况: