请问如何实现根据下拉列表的选中值完成相关后续内容的填充？

[qq1212]

页面中有一下拉列表，想实现如下功能，根据选中的下拉项，用该下拉项的下标索引作为key从一个类似HashMap的自定义容器中获取相应值并设置到后续的text文本框中？

举例如下：

<select id="AA" onchange="setInfo()">
    <option value=‘1’>李</option>
    <option value=‘2’>王</option>
</select>

<input type="text" name="age">
<input type="text" name="sex">

现在我选中李，页面就从一个自定义的类UserInfo（所有信息已经全部从服务端返回了）中以“李”作为key获取“李”的age,sex等信息，并显示在text文本框中，这个js怎么写？
我写的是

var slt = document.getElementById("AA");
var txt = slt.text;

//userInfo为UserInfo类的实例变量
document.all.age.value = <%=userInfo.getUserInfo(txt, "age")%>;//获取age
document.all.sex.value = <%=userInfo.getUserInfo(txt, "sex")%>;//获取sex

可js中的这个txt死活传不进去？怎么才能在jsp元素中调用js的内容？？

[qq1212]

var slt = document.getElementById("AA");
var txt = slt.text;

//userInfo为UserInfo类的实例变量
document.all.age.value = <%=userInfo.getUserInfo(txt, "age")%>;//获取age
document.all.sex.value = <%=userInfo.getUserInfo(txt, "sex")%>;//获取sex

这是setInfo()的js代码

[fei1703]

这样应该可以
txt = slt.options[slt.getSelectedIndex].text

[alpha_423]

<%=userInfo.getUserInfo(txt, "age")%>;//获取age
你这是在java代码中调用js变量了，这是不行的

[sirtener]

LZ, 你这样的写法有问题吧, 你是想从Map集合中取出相应的值吧,

我个人的做法: 将页面获取的值通过Ajax(或Extjs)传到后台,根据传来的值动态生成相应的值,再实例化好的对象(UserInfo)set相应的值(age,sex), 在页面上直接写

document.all.age.value = <%=userInfo.getUserInfo("age")%>;//获取age
document.all.sex.value = <%=userInfo.getUserInfo("sex")%>;//获取sex

这样写应该就没问题了. 而你那样的写法是从Map集合中取得相应的值

或者是将后台得到的对应值填充到map(集合名称为userInfo)集合中,在页面就这样写了

document.all.age.value = <%=userInfo.get("age")%>;//获取age
document.all.sex.value = <%=userInfo.get("sex")%>;//获取sex

[qq1212]

这样不行难道不能实现了？谁给个思路？

[qq1212]

其实这个userinfo也不是一个简单的map的，它实现了将所有的用户信息全部返回的功能，存的格式就是按照

李 25 男
王 23 女
钱 30 男
孙 35 男
。。。。。

这种样子的，如果不传这个txt字段（也就是name字段），是没法具体定位到某条记录了
等我获取了“李 25 男”这条记录 就能用userInfo.getUserInfo(key, property)获取property的具体值

所以我觉得其实没必要用ajax的 因为我所需的信息已经都返回了 关键是怎么根据这个key获取需要的信息这样了

[yukang_ky]

在java代码中调用js变量行不通，楼主还是换种思路吧。

[andy_today]

可以先將UserInfo的所有信息取出來轉化成一個字符串，然後保存到js的页面变量里。当拉列表选择后根据选择的姓，去判断字符位置，然后将姓后面两位的age，sex放到对应的文本框中

[lishunpinggd]

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
int selectId = Integer.parseInt(request.getParameter("selectId"));
System.out.println("selectId===>" + selectId);

UserInfo userInfo = new UserInfo(1, "李", 23, "男");
UserInfo userInfo2 = new UserInfo(2, "王", 25, "女");

JSONObject jsonObject = new JSONObject();


if (selectId == 1) {
try {
jsonObject.put("id", userInfo.getId());
jsonObject.put("name", userInfo.getName());
jsonObject.put("age", userInfo.getAge());
jsonObject.put("sex", userInfo.getSex());


} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}
if (selectId == 2) {
try {
jsonObject.put("id", userInfo2.getId());
jsonObject.put("name", userInfo2.getName());
jsonObject.put("age", userInfo2.getAge());
jsonObject.put("sex", userInfo2.getSex());

} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}

System.out.println(jsonObject.toString());



if (selectId != -1) {
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();

out.print(jsonObject.toString());
}

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
function setInfo(){
var selectId=document.getElementById('AA').value;

$.ajax({
type:"get",
url:"Select",
dataType:"json",
data:"selectId="+selectId,
success:function(msg){
var age=msg.age;
var sex=msg.sex;
document.getElementById('ageId').value=age;
document.getElementById('sexId').value=sex;

}

});
}

</script>

<select id="AA" onchange="setInfo()">
<option value="-1">请选择</option>
<option value="1">李</option>
<option value="2">王</option>
</select>

年龄:<input type="text" name="age" id="ageId">
性别:<input type="text" name="sex" id="sexId">

[lishunpinggd]

我已经实现了,并附上了代码 .使用了servlet,jquery

[qq1212]

靠LS两位的思路做出来了 单单就用了json就搞定了