根据单选按钮Java Servlet更改下拉列表内容 [英] Change drop down list content based on radio button Java Servlet
本文介绍了根据单选按钮Java Servlet更改下拉列表内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何根据单选按钮单击更改下拉列表内容。
我的代码：
How do I change drop down list content based on radio button click.
my code :
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* Servlet implementation class Tes
*/
@WebServlet("/Tes")
public class Tes extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Tes() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//HttpSession sess = request.getSession(true);
//int id = 5;
//sess.setAttribute("id", id);
//response.sendRedirect("det.html");
PrintWriter outid = response.getWriter();
outid.println("<!DOCTYPE html>"
+"<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>");
outid.println("<script type='text/javascript' src='dummy.js'></script>"
+"<link rel='stylesheet' type='text/css' href='result-light.css'>"
+"<style type='text/css'>"
+"</style>"
+"<script type='text/javascript'>"+"//<![CDATA["
+"(function() {"
+"var radIn = null, sel = null, current = false"
+"function init() {"
+"var radOut = document.getElementById('radOut');"
+"radIn = document.getElementById('radIn');"
+"sel = document.getElementById('dropDown');"
+"radIn.addEventListener('change', onChange);"
+"radOut.addEventListener('change', onChange);"
+"onChange();"
+"}"
+"function onChange() {"
+"var rad = radIn.checked;"
+"if(rad == current)"
+"return;"
+"current = rad;"
+"var array = rad ?"
+"['in1','in2','in3','in4','in5'] : "
+"['out1','out2','out3','out4','out5'];"
+"sel.innerHTML = '';"
+"array.forEach(function(k) {"
//alert(k + ' asdsd');
+"var opt = document.createElement('option');"
+"opt.innerHTML = k;"
+"sel.appendChild(opt);"
+"})"
+"}"
+"window.addEventListener('load', init);"
+"})();"
+"//]]>"
+"</script>"
+"<style type='text/css'></style></head>"
+"<body>"
+"<input type='radio' value='in' name='campus' id='radIn' checked='checked'>"
+"<label for='radIn'>In Campus</label>"
+"<br>"
+"<input type='radio' value='out' name='campus' id='radOut'>"
+"<label for='radOut'>Out Campus</label>"
+"<br>"
+"<select id='dropDown'><option>in1</option><option>in2</option><option>in3</option><option>in4</option><option>in5</option></select></body></html>");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
推荐答案
使用 onchange
< body>
< input type =radio> ;
onchange =document.getElementById（'e'）。hidden = 1; document.getElementById（'d'）。hidden = 0;
document.getElementById（ 'b'）。checked = 0;
value =xid =c> x< / input>
< input type =radio >
onchange =document.getElementById（'d'）。hidden = 1; document.getElementById（'e'）。hidden = 0;
文件。 getElementById（'c'）。checked = 0;
value =yid =b> y< / input>
< select id = d><选项> 1< /选项>
<选项> 2< /选项>
< / select>
< select id =e>< option> 3< / option>
< option> 4< / option>
< / select> ;
< / body>
use onchange
<body>
<input type="radio">
onchange="document.getElementById('e').hidden=1;document.getElementById('d').hidden=0;
document.getElementById('b').checked=0;"
value="x" id="c">x</input>
<input type="radio">
onchange="document.getElementById('d').hidden=1;document.getElementById('e').hidden=0;
document.getElementById('c').checked=0;"
value="y" id="b">y</input>
<select id="d"><option>1</option>
<option>2</option>
</select>
<select id="e"><option>3</option>
<option>4</option>
</select>
</body>
这篇关于根据单选按钮Java Servlet更改下拉列表内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
