两个html下拉列表事件 [英] Two html drop down list event
本文介绍了两个html下拉列表事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个html下拉列表，它们的值是使用jsp从数据库中检索的.
I have two html drop down list, their value are retrieved from the database by using jsp.
<%
String query =" SELECT question_text,question_id FROM questions WHERE id = ?";
PreparedStatement stmt = conn.prepareStatement(query);
stmt.setString(1,request.getParameter("QID"));
ResultSet rs = stmt.executeQuery();
if(!rs.next()) {} else {%>
<form action="#" method="post">
<p> First Question </p>
<select name="currentQuestion">
<%do{%>
<option value="<%=rs.getString("question_id")%>"><%=rs.getString("question_text")%> </option>
<%}while(rs.next());}%>
</select>
<%
String query =" SELECT question_text,question_id FROM questions WHERE id = ? AND question id != ? ";
PreparedStatement stmt = conn.prepareStatement(query);
stmt.setString(1,request.getParameter("QID"));
stmt.setString(2,CHOOSEN QUESTION);
ResultSet rs = stmt.executeQuery();
if(!rs.next()) {} else {%>
<p> Next Question </p>
<select name="currentQuestion">
<%do{%>
<option value="<%=rs.getString("question_id")%>"><%=rs.getString("question_text")%></option>
<%}while(rs.next());}%>
</select>
</form>
现在，当用户从第一个下拉列表中选择特定问题时，第二个下拉列表的值不包含该问题怎么办? 有人知道该怎么做吗?
Now, I what when the user choose a specific question from the first drop down list, the value of the second drop down list does not include that question ? is anyone know how to do that ?
推荐答案
- 您没有在代码中的任何地方设置
CHOOSEN QUESTION. - 您忘记了
option元素中的id和name标签. -
CHOOSEN QUESTION是变量的非法名称，因为它包含空格. - 您无法以尝试的方式进行操作，因为此代码在用户选择选项之前先在服务器端运行.您可能想做的是加载所有选项(如果它们没有太多)，并创建一个JS/jQuery，它将在第一个Dropbox的事件
onChange上刷新第二个Dropbox(在用户选择一个选项-您可能要禁用第二个保管箱) - 您可能想要做的另一件事是创建
form，该最终将最终将用户的选择提交到JSP(服务器端). - 您还可以使用AJAX来实现相同的行为，您可以找到有关操作方法的示例
- You don't set
CHOOSEN QUESTIONanywhere in the code. - You forgot he
idandnametags in theoptionelement. CHOOSEN QUESTIONis an illegal name for a variable since it contains a space.- You can't do it the way you're trying to do, cause this code runs on the server-side before the user chooses an option. What you probably want to do is load all the options (if there aren't too many of them) and create a JS/jQuery that will refresh the second dropbox on the event
onChangeof the first dropbox (before the user chooses an option - you'll probably want to have the second dropbox disabled) - Another thing that you probably want to do is create a
formwhich will eventually submit the user's choices to a JSP (server-side). - You can also achieve the same behavior using AJAX, you can find an example of how to do it here.
更新(使用JS更改选项的示例代码):
<html>
<head>
<script type="text/javascript" >
<!-- hide
function update(x){
if (x != "null") {
if (x == "1") {
var jumpmenu2 = document.getElementById("jumpmenu2");
var newOption1 = document.createElement('option');
newOption1.text = "a"; //HERE You'll use newOption1.text = "<?php echo $db_option_text;?>";
newOption1.value = "1"; //HERE You'll use newOption1.text = "<?php echo $db_option_value;?>";
var newOption2 = document.createElement('option');
newOption2.text = "b"; // same like above
newOption2.value = "2"; // same like above
var newOption3 = document.createElement('option');
newOption3.text = "c"; // same like above
newOption3.value = "3"; // same like above
jumpmenu2.remove(jumpmenu2.length-1);
jumpmenu2.remove(jumpmenu2.length-1);
jumpmenu2.remove(jumpmenu2.length-1);
try {
// For standard browsers
jumpmenu2.add(newOption1,null);
jumpmenu2.add(newOption2,null);
jumpmenu2.add(newOption3,null);
}
catch (ex) {
// For Microsoft Internet Explorer and other non-standard browsers.
jumpmenu2.add(newOption1);
jumpmenu2.add(newOption2);
jumpmenu2.add(newOption3);
}
}
else if (x == "2"){
var jumpmenu2 = document.getElementById("jumpmenu2");
var newOption1 = document.createElement('option');
newOption1.text = "d";
newOption1.value = "1";
var newOption2 = document.createElement('option');
newOption2.text = "e";
newOption2.value = "2";
var newOption3 = document.createElement('option');
newOption3.text = "f";
newOption3.value = "3";
jumpmenu2.remove(jumpmenu2.length-1);
jumpmenu2.remove(jumpmenu2.length-1);
jumpmenu2.remove(jumpmenu2.length-1);
try {
// For standard browsers
jumpmenu2.add(newOption1,null);
jumpmenu2.add(newOption2,null);
jumpmenu2.add(newOption3,null);
}
catch (ex) {
// For Microsoft Internet Explorer and other non-standard browsers.
jumpmenu2.add(newOption1);
jumpmenu2.add(newOption2);
jumpmenu2.add(newOption3);
}
}
}
}
// end hide -->
</script>
</head>
<body>
<form name="form1" id="form1">
<select name="jumpmenu" name="jumpmenu" onChange="update(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option value=1>1</option>
<option value=2>2</option>
</select>
</form>
<select name="jumpmenu2" id="jumpmenu2">
<option value=a id=1>a</option>
<option value=b id=2>b</option>
<option value=c id=3>c</option>
</select>
</body>
</html>
这篇关于两个html下拉列表事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
