select下拉选项调用另一张数据库表数据

最新推荐文章于 2025-08-27 23:17:17 发布

原创最新推荐文章于 2025-08-27 23:17:17 发布 · 1.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #select #下拉框 #外表联系

web 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍如何在页面上创建一个下拉框，并通过jQuery从数据库的外表联系中动态获取并填充选项。文章重点讲解了初始化方法及其工作原理，并提供了相关jQuery教程链接供进一步学习。

页面展示，一个下拉框，如下：

<tr>
		 	<td style="padding:8px;"><label for="pathTypeId">链路类型：</label></td>
	    	<td>
	    		<select name="pathTypeId.id" id="pathTypeId" style="width:140px;" >
	    			</select>
	    	</td>
	    	
	    </tr>

确定id ，通过id 调用ajax 方法，js源码如下：

<script >
	$(function(){
	 // alert(123);
		initSelect();
		
	})
    function initSelect(){
        $.ajax({
            url:'${basePath}/admin/pathType/getAllData',
            type:'get',
            data:'json',
            success:function(res){ 
            	res=JSON.parse(res);  //JSON转换为对象   
            	for(var i=0;i<res.length;i++){
            	console.log(res[i]);
                    $("#pathTypeId").append("<option value='"+ res[i].id +"'>"+ res[i].name +"</option>");   
            	}
            },
            error:function(){
              alert("pathTypeId init fail");
            }
        
        });
    
    }

</script>

function的初始化方法：

       $(function(){
	 // alert(123);
		initSelect();
		
	})

url获取数据得到一个对象，controller层方法如下：

@RequestMapping(value = "getAllData")
	@ResponseBody
	public List<Path> findAll(){
		List<Path> AllInfo = pathBiz.findAll();
		return AllInfo;
	}

select下拉选项for循环遍历，根据id获得velue：

$("#pathTypeId").append("<option value='"+ res[i].id +"'>"+ res[i].name +"</option>");

编辑页可用同种方法，but方法名不可以相同，id也不相同

更多有关jquery信息http://www.w3school.com.cn/jquery/