select下拉框，选择其中一个，然后进行查询，完成之后，页面上的select框不回显当前查询时选中的值...

JSP下拉框回显方法

最新推荐文章于 2022-09-02 10:05:26 发布

转载最新推荐文章于 2022-09-02 10:05:26 发布 · 5.3k 阅读

10 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3748375/blog/3032004

文章标签：

#python #数据库 #java

本文介绍了一种在JSP页面实现下拉框回显的方法，包括使用隐藏input元素存储值、JavaScript处理值的变化并传给后端，以及在页面加载时通过Ajax请求动态填充下拉选项。

2019独角兽企业重金招聘Python工程师标准>>>

1.首先在jsp页面select语句下面增加一个隐藏的input

 <select id="demo" name="demo" onchange="entryChange();">
	<option value="">--请选择--</option>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
 </select>

<input id="entryId" name="entryId" type="hidden" value="此处写你从后台接收到的值">

2.然后对input框中的值进行赋值，传给后台代码

function entryChange(){
   var entryId= document.getElementById("demo").value;
   $('#entryId').val(entryId);
}

3.赋值之后在后台定义，然后给他set/get方法，以便在jsp代码中进行接收

private String entryId;

public String getEntryId() {
	return entryId;
}

public void setEntryId(String entryId) {
	this.entryId = entryId;
}

4.从后台会通过xml还是别的方式跳转到jsp页面，在页面初始化方法中对传进来的值进行处理

var entryId = $("#entryId").val();

//这里根据你自己的需求来进行处理，因为我这里的数据是用ajax获取到的值拼接而成的
$.ajax({  
    contentType:"application/x-www-form-urlencoded;charset=UTF-8",   
    type:"POST",  
    url:"xxxx/xxxxxxxx.action?deptId="+deptId + "&" + Math.random(),  
    dataType:"json",
    success:function(res){
        var ststistic = "<option value=''>"+ "--请选择--" +"</option>";
	    for(var i=0;i<res.length;i++){
	       res[i].statisticId;
	       res[i].statisticName;
	       if(entryId == res[i].statisticId){
	           ststistic=ststistic+"<option selected='selected'   value='"+res[i].statisticId+"'>"+res[i].statisticName+"</option>";
	       }else{
	           ststistic=ststistic+"<option value='"+res[i].statisticId+"'>"+res[i].statisticName+"</option>";
	       }
             }
       $("#informationTypeIdEntry").html(ststistic);
   }
});

对循环出来的值进行判断，如果从后台传进来的entryId与循环出来的某个值相同，则在<option>中拼接上 selected='selected'属性。

5.还有一种情况就是下拉框的数据显示在页面上是ztree的形式，这种形式使用的不是select标签，而是input标签，那么我们这里就还可以使用另外一种回显方法（上面的都一样，只不过从后台返回值的时候做的回显操作不一样）：

//ztree形式的input框
<input id="citySel" name="citySel" readonly type="text" onclick="showMenu(this); return false;"/>

var entryId= $("#entryId").val();

if (citySelName.length > 0) {
    $("#citySel").val(citySelName).trigger("change")；
} else {
    $("#citySel").val(null).trigger("change");//id为空的话 select框就是空
}

也可以起到回显的效果

转载于:https://my.oschina.net/u/3748375/blog/3032004