Code Bye

后台查询出来的数据，再前台做了下拉列表的问题

码拜
javascriptjavasql

问题如下：后台查询出来的问题在前台做了下拉列表，我想要完成的是，如过我选择了某个值，那么这个值对应的数据显示在后边

比如：我选择了1，则1对应的名字要显示出来，如何办

代码如下

package com.mtqj.quotes.model;

public class Material {

	private int M_id;
	private String Material;
	private int Price;

	public int getM_id() {
		return M_id;
	}

	public void setM_id(int m_id) {
		M_id = m_id;
	}

	public String getMaterial() {
		return Material;
	}

	public void setMaterial(String material) {
		Material = material;
	}

	public int getPrice() {
		return Price;
	}

	public void setPrice(int price) {
		Price = price;
	}

}
package com.mtqj.quotes.servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.mtqj.quotes.Util.DBUtil;
import com.mtqj.quotes.model.Material;

public class QuotesServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// 查询数据
		ArrayList<Material> materialList = new ArrayList<Material>();
		String sql = "select * from Material;";
		Connection conn = DBUtil.getConn();
		PreparedStatement ps = null;
		ResultSet rs = null;

		try {
			ps = conn.prepareStatement(sql);
			rs = ps.executeQuery();
			while (rs.next()) {
				Material m = new Material();
				m.setM_id(rs.getInt("M_id"));
				m.setMaterial(rs.getString("Material"));
				m.setPrice(rs.getInt("Price"));
				materialList.add(m);
				//System.out.println(m);
			}

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

		request.setAttribute("materialList", materialList);
		request.getRequestDispatcher("/index.jsp").forward(request, response);

	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request, response);
	}

}
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP ""index.jsp"" starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
</head>

<body>
	This is my JSP page.
	<br>

	<table align="center" border="1">

			<c:if test="${not empty materialList }">
				<select>
					<c:forEach items="${materialList}" var="u">
						<option value="${u.m_id }">${u.material}</option>

					</c:forEach>
				</select>
			</c:if>


	</table>
</body>
</html>
<select name=”classId” style=”width:140px”>
<c:forEach var=”academy” items=”${list}”>
<option value=”${academy.id}” selected>
${academy.name}
</option>
</c:forEach>
</select>
1楼的，我已经做了下拉列表，我想要的是当我选择了Material，那么Material对应的Price如何显示出来
要显示在哪里？后面是什么意思？
<option value=”${u.m_id }”>${u.material}</option>后面可个跟个隐藏标签，先把Price的值保存下来，select变化的时候，获取对应隐藏标签的值，显示到你想显示的地方
我是这样做的，但是显示不出来
我是这样做的，但是显示不出来 
<select>
				<c:forEach items="${materialList}" var="u">
					<option value="${u.m_id }">${u.material}</option>
				</c:forEach>
					<input value="${u.price }">${u.price }</input>
			</select>
引用 5 楼 xcmcc 的回复:

我是这样做的，但是显示不出来

<select>
				<c:forEach items="${materialList}" var="u">
					<option value="${u.m_id }">${u.material}</option>
				</c:forEach>
					<input value="${u.price }">${u.price }</input>
			</select>

不是这样做的，我说的话你还没听懂

[code=javascript]<select>
				<c:forEach items="${materialList}" var="u">
					<option value="${u.m_id }">${u.material}</option>
                                        <input type="hidden" value="${u.price }"></input>
				</c:forEach>
                                 // 这里是要显示的标签
                                <label></label>
			</select>

[/code]
当选择下拉发生change事件的时候，获取对应option后面的那个hidden的value，赋值给label
剩下的事件在JS里面完成

5分
<c:if test=”${not empty materialList }”>
                <select>
                    <c:forEach items=”${materialList}” var=”u”>
                        <option value=”${u.m_id }”>${u.material}</option>    
                    </c:forEach>
                </select>
  <c:forEach items=”${materialList}” var=”u”>
                        <input  id=”${u.m_id }” value=”${u.price}”/>
                    </c:forEach>
            </c:if>
js ： onchange(){  获取当前select的值 ， 然后查找id为“select值”的value  则可以用来显示}
 
引用 8 楼 only_qin_wo 的回复:

<c:if test=”${not empty materialList }”>
                <select>
                    <c:forEach items=”${materialList}” var=”u”>
                        <option value=”${u.m_id }”>${u.material}</option>    
                    </c:forEach>
                </select>
  <c:forEach items=”${materialList}” var=”u”>
                        <input  id=”${u.m_id }” value=”${u.price}”/>
                    </c:forEach>
            </c:if>
js ： onchange(){  获取当前select的值 ， 然后查找id为“select值”的value  则可以用来显示}
 

请把JS代码给出来吧！我现在脑子里没有一点思路

15分
<c:if test=”${not empty materialList }”>
                <select id=”mselect” onchange=”showPrice()”>
                    <c:forEach items=”${materialList}” var=”u”>
                        <option value=”${u.m_id }”>${u.material}</option>    
                    </c:forEach>
                </select>
  <c:forEach items=”${materialList}” var=”u”>
                        <input  id=”${u.m_id }” value=”${u.price}” type=“hidden”/>
                    </c:forEach>
        <div id=”pricediv”></div>
            </c:if>

js:
function showPrice(){
   var id=$(“#mselect”).val();
var price=$(“#”+id).val();
   $(“#pricediv”).html(price)
}

新增了一个pricediv用来显示price，本来想试着用js将对应的input显示出来，但是type属性一经设置就不能改了，这样就是onchange调用showPrice函数，然后将对应的值显示在div中，其实也可以在showPrice函数中用一个ajax去数据库拿着id查出相应的price显示在pricediv中，这样就不用再页面里循环那个input了（写了两边，第一遍的时候机器TMD重启了！fuck！）
CodeBye 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明后台查询出来的数据，再前台做了下拉列表的问题！