Select下拉框动态获取数据，并触发事件

最新推荐文章于 2023-04-12 11:11:45 发布

互联网极客

最新推荐文章于 2023-04-12 11:11:45 发布

阅读量2.3w

点赞数

分类专栏： ----前端开发文章标签： Select下拉框动态获取数据

本文链接：https://blog.csdn.net/jsqfengbao/article/details/46124305

版权

----前端开发专栏收录该内容

32 篇文章 3 订阅

订阅专栏

做项目中遇到了Select动态获取数据，并当选中Select某个下拉框的时候，获取数据的ID，触发事件

在页面中很简单的几行代码：

<span >队列：
	<select id="ServiceId" name="ServiceID" οnclick="getService()">
					
	</select>

</span>

对与下拉框中的数据，初始化的时候显示出来：

在body里面这么写:<body οnlοad="init()">

//初始化图形
function init()
{

initServiceId();

}

对于initServiceId()函数用于初始化下拉框的数据

function initServiceId()
{
	var optionsServiceId ="<option value =''></option>";
	data.nType = 'view';
	data.name ='GROUP';
	var serviceId =new Array();
	var serviceName = new Array();
	$.getJSON("/rpt12345/jsp/service/queryData.jsp",data,function(result){
		for(var i=0;i<result.length;i++){
			serviceName=result[i].SERVICENAME;
			serviceId =result[i].SERVICEID;
			optionsServiceId ="<option value=\'"+serviceId+"' >"+serviceName+"</option>";
			$("#<span style="color:#ff0000;">ServiceId</span>").append(optionsServiceId);
		}
	});
}

对于上述函数，是使用getJSON从那个URl中获取的数据，放入result对象中，并从result中获取ServiceName、serviceID等内容，最后使用JQuery将ServiceId使用append函数，添加到optionServiceId中

当选择Select选项时触发getService()函数

对于getService()函数内容如下：

function getService(){
var serviceId =document.getElementById("ServiceId");
$("#ServiceId").change(function(){ //下拉框改变时取得值
data.ServiceID=document.getElementById('ServiceId').value;

data.nType="view";

response_bar();
response_pie1();
response_pie2();
response_pie3();

});

}

将获取到的serviceID放入data.nType中，并触发下面的四个JS函数。

整个过程就是这么简单，其实只要JS货JQuery学好的话，就好写了。。。。

互联网极客

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Select下拉框动态获取数据，并触发事件

做项目中遇到了Select动态获取数据，并当选中Select某个下拉框的时候，获取数据的ID，触发事件在页面中很简单的几行代码：队列：对与下拉框中的数据，初始化的时候显示出来：在body里面这么写://初始化图形function init(){initServiceId();}对于initServiceId()函数用于初始化下拉框
复制链接

扫一扫