js带方法的下拉框怎么做？

最新推荐文章于 2022-11-12 00:21:02 发布

关阿炎

最新推荐文章于 2022-11-12 00:21:02 发布

阅读量773

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 下拉框触发方法

本文链接：https://blog.youkuaiyun.com/TOMA1B2C3/article/details/79884974

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript和AJAX实现动态填充下拉列表的方法。通过点击下拉框触发AJAX请求，从服务器获取数据并实时更新下拉选项。文章提供了具体的HTML结构和JavaScript代码实现。

本人想做一个下拉列表，不是写死的那种，网上搜了一下基本上都是写死的，既然网上找不到，我就把自己的办法贡献出来吧，是带方法的下拉框。

样式如下：

<select class="input-sm" id="grassRootsUnit" name="grassRootsUnit" style="width:160px"  onclick="queryGrassRootsUnit()"></select>

相应的js代码如下：

$(function queryGrassRootsUnit(){
		$.ajax({
	        type: 'get',
	        url:' <%=basePath%>webapi/budget/queryGrassRootsUnit',
	        data:{
	        	
			},
	        success : function(data) {
	        	if(data.respCode=='-99'){
	        		alert_info_msg("登录已过期，请登录");
	        		location.href="login_contract.jsp";
	        	}
	        	removeLoadingImg();
	        	
	        	var dataList = data.entry.GrassRootsUnitList;
	        	
	        	var html="<option value=''>"+'全部'+"</option>";
	        	for (var i = 0; i < dataList.length; i++) {
	        		html+="<option value='" + dataList[i] + "'  >" +dataList[i]+ "</option>";
				}
	        	$("#grassRootsUnit").html(html);	
	           
	        }
	   });
	});

希望能帮到你！

在此说明一下，外面那层$()是必须的，如果没有这层，点击下拉没有效果！！！