Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There are basically three ways to achieve this:</p> <ol> <li><p>Submit form to a servlet during the onchange event of the 1st dropdown (you can use Javascript for this), let the servlet get the selected item of the 1st dropdown as request parameter, let it obtain the associated values of the 2nd dropdown from the database as a <code>Map&lt;String, String&gt;</code>, let it store them in the request scope. Finally let JSP/JSTL display the values in the 2nd dropdown. You can use <a href="http://java.sun.com/products/jsp/jstl/1.1/docs/tlddocs/" rel="nofollow noreferrer">JSTL</a> (just drop <a href="http://download.java.net/maven/1/jstl/jars/jstl-1.2.jar" rel="nofollow noreferrer">jstl-1.2.jar</a> in <code>/WEB-INF/lib</code>) <a href="http://java.sun.com/products/jsp/jstl/1.1/docs/tlddocs/c/forEach.html" rel="nofollow noreferrer"><code>c:forEach</code></a> tag for this. You can prepopulate the 1st list in the <code>doGet()</code> method of the <code>Servlet</code> associated with the JSP page.</p> <pre class="lang-html prettyprint-override"><code>&lt;select name="dd1" onchange="submit()"&gt; &lt;c:forEach items="${dd1options}" var="option"&gt; &lt;option value="${option.key}" ${param.dd1 == option.key ? 'selected' : ''}&gt;${option.value}&lt;/option&gt; &lt;/c:forEach&gt; &lt;/select&gt; &lt;select name="dd2" onchange="submit()"&gt; &lt;c:if test="${empty dd2options}"&gt; &lt;option&gt;Please select parent&lt;/option&gt; &lt;/c:if&gt; &lt;c:forEach items="${dd2options}" var="option"&gt; &lt;option value="${option.key}" ${param.dd2 == option.key ? 'selected' : ''}&gt;${option.value}&lt;/option&gt; &lt;/c:forEach&gt; &lt;/select&gt; &lt;select name="dd3"&gt; &lt;c:if test="${empty dd3options}"&gt; &lt;option&gt;Please select parent&lt;/option&gt; &lt;/c:if&gt; &lt;c:forEach items="${dd3options}" var="option"&gt; &lt;option value="${option.key}" ${param.dd3 == option.key ? 'selected' : ''}&gt;${option.value}&lt;/option&gt; &lt;/c:forEach&gt; &lt;/select&gt; </code></pre> <p>Once caveat is however that this will submit the <strong>entire</strong> form and cause a "flash of content" which may be bad for User Experience. You'll also need to retain the other fields in the same form based on the request parameters. You'll also need to determine in the servlet whether the request is to update a dropdown (child dropdown value is null) or to submit the actual form.</p></li> <li><p>Print all possible values of the 2nd and 3rd dropdown out as a Javascript object and make use of a Javascript function to fill the 2nd dropdown based on the selected item of the 1st dropdown during the onchange event of the 1st dropdown. No form submit and no server cycle is needed here. </p> <pre class="lang-html prettyprint-override"><code>&lt;script&gt; var dd2options = ${dd2optionsAsJSObject}; var dd3options = ${dd3optionsAsJSObject}; function dd1change(dd1) { // Fill dd2 options based on selected dd1 value. var selected = dd1.options[dd1.selectedIndex].value; ... } function dd2change(dd2) { // Fill dd3 options based on selected dd2 value. var selected = dd2.options[dd2.selectedIndex].value; ... } &lt;/script&gt; &lt;select name="dd1" onchange="dd1change(this)"&gt; &lt;c:forEach items="${dd1options}" var="option"&gt; &lt;option value="${option.key}" ${param.dd1 == option.key ? 'selected' : ''}&gt;${option.value}&lt;/option&gt; &lt;/c:forEach&gt; &lt;/select&gt; &lt;select name="dd2" onchange="dd2change(this)"&gt; &lt;option&gt;Please select parent&lt;/option&gt; &lt;/select&gt; &lt;select name="dd3"&gt; &lt;option&gt;Please select parent&lt;/option&gt; &lt;/select&gt; </code></pre> <p>One caveat is however that this may become unnecessarily lengthy and expensive when you have <strong>a lot</strong> of items. Imagine that you have 3 steps of each 100 possible items, that would mean 100 * 100 * 100 = 1,000,000 items in JS objects. The HTML page would grow over 1MB in length.</p></li> <li><p>Make use of XMLHttpRequest in Javascript to fire an asynchronous request to a servlet during the onchange event of the 1st dropdown, let the servlet get the selected item of the 1st dropdown as request parameter, let it obtain the associated values of the 2nd dropdown from the database, return it back as XML or <a href="http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_)" rel="nofollow noreferrer">JSON</a> string. Finally let Javascript display the values in the 2nd dropdown through the HTML DOM tree (the Ajax way, as suggested before). The best way for this would be using <a href="http://jquery.com" rel="nofollow noreferrer">jQuery</a>.</p> <pre class="lang-html prettyprint-override"><code>&lt;%@ page pageEncoding="UTF-8" %&gt; &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %&gt; &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;SO question 2263996&lt;/title&gt; &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { $('#dd1').change(function() { fillOptions('dd2', this); }); $('#dd2').change(function() { fillOptions('dd3', this); }); }); function fillOptions(ddId, callingElement) { var dd = $('#' + ddId); $.getJSON('json/options?dd=' + ddId + '&amp;val=' + $(callingElement).val(), function(opts) { $('&gt;option', dd).remove(); // Clean old options first. if (opts) { $.each(opts, function(key, value) { dd.append($('&lt;option/&gt;').val(key).text(value)); }); } else { dd.append($('&lt;option/&gt;').text("Please select parent")); } }); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;select id="dd1" name="dd1"&gt; &lt;c:forEach items="${dd1}" var="option"&gt; &lt;option value="${option.key}" ${param.dd1 == option.key ? 'selected' : ''}&gt;${option.value}&lt;/option&gt; &lt;/c:forEach&gt; &lt;/select&gt; &lt;select id="dd2" name="dd2"&gt; &lt;option&gt;Please select parent&lt;/option&gt; &lt;/select&gt; &lt;select id="dd3" name="dd3"&gt; &lt;option&gt;Please select parent&lt;/option&gt; &lt;/select&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>..where the <code>Servlet</code> behind <code>/json/options</code> can look like this:</p> <pre><code>protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String dd = request.getParameter("dd"); // ID of child DD to fill options for. String val = request.getParameter("val"); // Value of parent DD to find associated child DD options for. Map&lt;String, String&gt; options = optionDAO.find(dd, val); String json = new Gson().toJson(options); response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(json); } </code></pre> <p>Here, <code>Gson</code> is <a href="http://code.google.com/p/google-gson/" rel="nofollow noreferrer">Google Gson</a> which eases converting fullworthy Java objects to JSON and vice versa. See also <a href="https://stackoverflow.com/questions/4112686/how-to-use-servlets-and-ajax">How to use Servlets and Ajax?</a></p></li> </ol>
    singulars
    1. This table or related slice is empty.
    1. POPopulating cascading dropdown lists in JSP/Servlet
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USBalusC
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POPopulating cascading dropdown lists in JSP/Servlet
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAwesome code BalusC. If u dont mind, I want to ask a couple questions on your last method. In your function fillOption(), the line $.getJSON, it look like you send a GET request to the servlet, but where do you specify the url of the servlet. In addition, does the result that send back from the servlet get store in 'opts'. So is 'opts' like and JSON object? Can u explain this line: $('>option', dd).remove(); a bit more?
      singulars
      1. PO
      1. USThang Pham
    2. CO@Harry Pham: `$.getJSON` is documented here: http://api.jquery.com/jQuery.getJSON/ The URL is just `/json/options`. Also see the text (don't only look at code). You can just choose whatever URL you want. The `opts` is indeed JSON string as returned by servlet. Also see the JSON link to learn more about it. If you know Javabeans good, then JSON should look familiar enough. The `$('>option', dd).remove()` removes all previous options from the dropdown, otherwise it would only be appended, appended, etc.. By the way, if you like answers, just upvote it. I see that you almost never voted.
      singulars
      1. PO
      1. USBalusC
    3. COI see it now, the first parameter of getJSON is the url. I am a complete idiot. About the vote thing, so sorry. I did not even realize that. I will look back at my old post and update the vote. Thank you very much. If I have more question, I will come back and ask u.
      singulars
      1. PO
      1. USThang Pham
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload