Implementing a dynamic listbox feature in JSP

I have a setup with two listboxes on my JSP page. The first listbox is initially populated with data from the database. When a user selects an item in the first listbox, I want the second listbox to be filled with corresponding database data using Ajax. Since I am new to JSP, I am seeking assistance.

Below is the JavaScript code I have been using to fetch the selected value from the first listbox.

<script type="text/javascript" > 
  $(document).ready(function(){ 
    $("#rt_select").click(function() { 
      var option = $('#lstsprintid').val(); 
      alert(option); 
      return option; 
    }); 
  }); 
</script>

My problem lies in integrating the JavaScript returned value into my JSP page. Presented below is the multiple select listbox where the data is sourced from the database.

<p>Select Name :
<select size="3" id="lstsprintid" multiple="multiple">
<%
while(rs.next())
{
 String name = rs.getString("s_name"); 

 %>
<option value="<%=name %>"><%=name %></option>
<%
}
%>
</select>           

I need guidance on which JavaScript code to implement in order to retrieve the list of values selected in the above listbox.

 <%
 String s1 = request.getParameter("txt_test");
 out.println(s1);
 Statement st1= con.createStatement();
ResultSet rs1=st1.executeQuery("Select sprint_id from sprint where              sprint_name in ("+ s1 +")");
 %>

Answer №1

To retrieve the selected value from the first list using the onchange event and .selectedIndex, follow this script:

<script type="text/javascript"> 
   $("#lstsprintid").onchange(function() { 
      var optionIndex = $('#lstsprintid').selectedIndex; 
      alert(optionIndex); 
      return optionIndex;
      // now you can proceed to populate the second list with this value
   });  
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to set the initial value of an input[range] in Angular2 when the value exceeds 100

After encountering a similar issue with AngularJS, I posted a question on StackOverflow titled How to initialize the value of an input[range] using AngularJS when value is over 100. As I dive into learning Angular2, I am curious if it handles initializatio ...

Retrieving the image source from the image element by utilizing $(this).find("");

Currently facing a challenge in retrieving the image source (e.g., ./imgs/image.jpg) from an image element. Managed to make some progress by using the following code: var image = document.getElementById("home-our-doughnuts-box-image").getAttribute("src" ...

The jQuery Ajax Error is consistently being triggered

I'm puzzled as to why my custom callback error function keeps getting triggered. When I remove this callback function, the success callback works just fine. Some sources online suggest that it could be an encoding issue, but I don't think that&a ...

Fixing the Jquery Clone Bug

Recently, I came across a jQuery clone plugin that is designed to fix the values of cloned textarea and select elements. This code snippet showcases how it works: (function (original) { jQuery.fn.clone = function () { var result = ori ...

Disregard all numbers following the period in regex

I have developed a function to format numbers by adding commas every 3 digits: formatNumber: (num) => { return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') }, The issue with this function is that it also add ...

The Vue.js modal is unable to resize below the width of its containing element

My challenge is to implement the Vue.js modal example in a larger size. I adjusted the "modal-container" class to be 500px wide, with 30px padding and a max-width of 80%. However, I'm facing an issue where the "modal-mask" class, containing the contai ...

A guide on performing CRUD operations on locally stored JSON data using React JS

Retrieve the JSON data from any endpoint and store it locally fetch("any endpoint") .then((response) => response.json()) .then((responseJson) => { this.state ={ data:responseJson } }) How to perform CRUD operations on a sample JSO ...

Selecting a checkbox based on the user's previous choice

There is an option on my website for users to opt out of a specific feature. Their decision is stored in the database as either "0" or "1". However, when they return to the site, the checkbox is unchecked even if they had previously selected it. I would l ...

Using directive to access service values directly

I am in need of utilizing a directive to fetch and display data using ng-repeat from a service. The anticipated result will be <ul>Days <li>Monday</li> <li>Tuesday</li> ... <ul> <ul>Month <li>January</li ...

Only if there is an update in the SQL database, I wish to refresh the div

I have created a voting system and I am facing an issue with the data updating. I have implemented a setInterval function in javascript to load the data every 2 seconds, but it's not working as expected. There are no errors shown, but the data is not ...

Transform JavaScript into Native Code using V8 Compiler

Can the amazing capabilities of Google's V8 Engine truly transform JavaScript into Native Code, store it as a binary file, and run it seamlessly within my software environment, across all machines? ...

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Check out this informative article here I'm looking for a way to gather the values from all the text boxes and store them in an array within my JavaScript form. I attempted to enclose it in a form, but I'm struggling to retrieve the HTML ID beca ...

Clicking on the delete option will remove the corresponding row of Firebase data

I am encountering an issue that appears to be easy but causing trouble. My goal is to delete a specific row in an HTML table containing data from Firebase. I have managed to delete the entire parent node of users in Firebase when clicking on "Delete" withi ...

Clearing Arrays in React Native Using useState

I'm struggling with the following code which aims to create an animated polyline for a map. I came across some examples online, but they were using outdated methods and didn't include useEffect or useState. I can't seem to clear the polylin ...

Determine the quantity of characters available in a contenteditable field

I have implemented a directive that allows me to input editable content inside a tag Recently, I made modifications to include a character counter feature. However, I noticed that when I add line breaks, the character count increases erroneously. https: ...

Format the image to fit within a div container

I'm currently utilizing Bootstrap and am looking to insert some images into my div while ensuring they are all the same size (standardized). If the images are too large (as they typically are), I want to resize them to fit within my div and crop them ...

It is not possible to recycle a TinyMCE editor that is embedded in a popup

Having a frustrating issue with the TinyMCE Editor plugin embedded within a Fancybox pop-up window. I have a list of objects with Edit links that trigger an AJAX call to retrieve content from the server and place it in a <textarea>. A TinyMCE editor ...

The nested directive link function failed to execute and the controller was not recognized

Apologies in advance for adding to the sea of 'mah directive link function isn't called!' posts on Stack Overflow, but none of the solutions seem to work for me. I have a directive named sgMapHeader nested inside another directive called sg ...

Disrupting a Program Operation

We are utilizing the gauge Google Chart applet to visually track the failure rates of message transfers on a SOAP interface via AJAX. My goal is to make the page's background flash red and white when the failure rate reaches 50% or higher, and remain ...

Mastering the art of updating objects with React's useState() function

Having trouble updating my state using useState(). Whenever the alert pops up, it shows the initial value of my state. Below is a sample code snippet. I expect that when I click the Save button, setData should update data with the new form values, then di ...