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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jsqfengbao/article/details/46124305

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

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

<span >队列:
	<select id="ServiceId" name="ServiceID" onclick="getService()">
					
	</select>
</span>
对与下拉框中的数据,初始化的时候显示出来:

在body里面这么写:<body onload="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学好的话,就好写了。。。。


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页