您的位置：首页 > 其它

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

2015-05-28 15:47 393 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航