做项目中遇到了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学好的话,就好写了。。。。