jsp页面上怎么实现选择下拉框中的选项在相应的文本框动态显示某一字段值

lfbboy 2014-01-09 08:43:14

下拉框中的值已经获取到了，用的是struts的标签

	<td width="30%" style="padding: 5px;">请选择要借用的设备：</td>

		<td width="70%">

		<html:select property="deviceID" styleId="deviceID" onchange="select()">

		<html:options collection="deviceList" property="deviceID" labelProperty="deviceName"/>

		</html:select></td>

		</tr>

		<tr>

		<td width="15%" style="padding: 5px;">库存数量：</td>

		<td width="30%"><html:text property="kcsl"  size="12" disabled="disabled"/></td>

现在想要在选择下拉框中的选项时，在文本框中获取到该设备的库存量

...全文

1549 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

liupan6889 2014-01-10

打赏
举报

下面是一个ajax验证的部分代码，你参考参考 validation.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>Using Ajax for validation</title>
  
    <script type="text/javascript">
        var xmlHttp;

        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();                
            }
        }

        function validate() {
            createXMLHttpRequest();
            var date = document.getElementById("birthDate");
            var url = "ValidationServlet?birthDate=" + escape(date.value);
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = callback;
            xmlHttp.send(null);
        }

        function callback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    var mes = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
                    var val = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
                    setMessage(mes, val);
                }
            }
        }
        
        function setMessage(message, isValid) {            
            var messageArea = document.getElementById("dateMessage");
            var fontColor = "red";
            
            if (isValid == "true") {
                fontColor = "green";                
            }
            messageArea.innerHTML = "<font color=" + fontColor + ">" + message + " </font>";
        }

    </script>
  </head>
  <body>
    <h1>Ajax Validation Example</h1>
    Birth date: <input type="text" size="10" id="birthDate" onchange="validate();"/>
    <div id="dateMessage"></div>
  </body>
</html>

validationSevlet.java


import java.io.*;
import java.text.ParseException;
import java.text.SimpleDateFormat;

import javax.servlet.*;
import javax.servlet.http.*;

public class ValidationServlet extends HttpServlet {    
    
    /** Handles the HTTP <code>GET</code> method.
     * @param request servlet request
     * @param response servlet response
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        
        boolean passed = validateDate(request.getParameter("birthDate"));
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        String message = "You have entered an invalid date.";
        
        if (passed) {
            message = "You have entered a valid date.";
        }
        out.println("<response>");
        out.println("<passed>" + Boolean.toString(passed) + "</passed>");
        out.println("<message>" + message + "</message>");
        out.println("</response>");
        out.close();
     }
    
    /**
     * Checks to see whether the argument is a valid date.
     * A null date is considered invalid. This method
     * used the default data formatter and lenient
     * parsing.
     *
     * @param date a String representing the date to check
     * @return message a String represnting the outcome of the check
     */
    private boolean validateDate(String date) {
        
        boolean isValid = true;
        if(date != null) {
            SimpleDateFormat formatter= new SimpleDateFormat("MM/dd/yyyy");
            try {
                formatter.parse(date); 
            } catch (ParseException pe) {
                System.out.println(pe.toString());
                isValid = false;
            }
        } else {
            isValid = false;
        }
        return isValid;
    }
}

a_jian 2014-01-10

打赏
举报

如果只是一个简单赋值，一个JS方法+onchange事件就能搞定了如果是选择下拉框某项，需要前后台交互，实现二级连动效果的话，就用ajax

tony4geek 2014-01-10

打赏
举报

是这个不

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function select(e){
document.getElementById("txtValue").value=e.value+"----->"+e.options[e.selectedIndex].text;
}
</script>
</head>
<body>
<table>
<tr>
<td width="30%" style="padding: 5px;">请选择要借用的设备：</td>
    <td width="70%">
  <select onchange="select(this)">   
    <option value='11'/>111</option>
    <option value='12'/>122</option>
    <select></td>
    </tr>
    <tr>
    <td width="15%" style="padding: 5px;">库存数量：</td>
    <td width="30%">
     <input type='text' id='txtValue' value='' disabled="disabled"/> 
</tr>
</table>
</body>
</html>

tzp19910827 2014-01-10