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

最新推荐文章于 2022-09-12 14:37:25 发布

转载最新推荐文章于 2022-09-12 14:37:25 发布 · 4.5k 阅读

文章标签：

#Select下拉框动态获取数据 #数据 #事件 #动态 #select #下拉框 #获取

本文介绍如何使用JavaScript和jQuery实现Select下拉框的动态加载功能，包括初始化下拉框选项并根据用户选择触发相关事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址为： Select下拉框动态获取数据，并触发事件

做项目中遇到了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();

});

}