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 ?
- You don't set
CHOOSEN QUESTION anywhere in the code. - You forgot he
id and name tags in the option element. CHOOSEN QUESTION is 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
onChange of 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
form which 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.
UPDATE (example code for changing options using 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>
