Modify the chosen value of a dropdown list that is created dynamically

In the JSP page, there is a dynamic drop-down list generated as shown below:

<table BORDER=4 BORDERCOLOR=ORANGE width="300px">
    <tr>
        <td>Model:</td>
        <td><select name="model" id="model">
            <c:forEach items="${model_list}" var="item">
                <option value="${item.modelId}">${item.modelName}</option>
            </c:forEach>
        </select></td>
   </tr>
</table>

The goal is to update the selected value of the dropdown based on another value obtained from this section:

<table BORDER=4 BORDERCOLOR=ORANGE width="120px" id="product_table">
<c:forEach items="${product_list}" var="car">
    <tr>
        <td><INPUT type="checkbox" name="chk_group" value="${car.carId}" /></td>
        <td><c:out value="${car.carId}" /></td>
        <td><c:out value="${car.model.modelName}" /></td>
        <td><c:out value="${car.model.modelId}" /></td>

</table> 

Below is the script intended for this purpose:

function findRowNumber() {
    var rowIdx;
    var rowData = new Array();
    var table = document.getElementById('product_table');
    var rows = table.getElementsByTagName('tr');
    var selectedRow;
    for ( var i = 0; i < rows.length; i++) {
        rows[i].onclick = function() {
            rowIdx = this.rowIndex;
            selectedRow = rows[rowIdx];
            document.getElementById('model').value = selectedRow.cells[3].innerHTML;

        }
    }
}

Please note that selectedRow.cells[3].innerHTML returns 3 but the value does not change.

Answer №1

There doesn't seem to be an element in your HTML with the id of model. Did you intend for the input with a name of model to also have that as its id?

I've also noticed that there is no closing </tr> tag in your second table.

It's recommended not to use var rowData = new Array();, instead, opt for literal notation like this: var rowData = [];.

Once I added the id and a couple of extra <tr> tags, everything worked perfectly for me:

http://jsfiddle.net/FJfZK/

Remember, when troubleshooting a JavaScript problem, the rendered HTML output is much more valuable than information about your server's actions. Focus on DOM manipulation for better debugging results.

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

Data that is loaded asynchronously will not display rendered

I have async data loading via jayson from a server. After the data has finished loading, the boolean "loading" is set to false but my content does not re-render. Even though I can see on the console that the data was loaded correctly. var App = new Vue( ...

I am trying to understand why my React component's render function is being called twice - first without any data and then again with data, resulting in a

I am facing an issue with my TreeNav component, where the data is fetched from an API call. I have set up the reducer, action, and promise correctly, but when I try to map over the data in the component render function, I get an error saying "Uncaught Type ...

Issue: The module could not be located within the project or in any of the directories, including node_modules

Error: It seems we're having trouble resolving the module navigation/stack-routes from MainTabs.tsx file in gymzoo project directory. The path navigation/stack-routes could not be located within the project or node_modules directory. Greetings! I&apo ...

Using Electron to redirect to a different HTML file while passing GET variables

I am currently working on developing an Electron app. Within the project files, for example, I have app.html. My goal is to send GET variables like ?id=54&q=asd to the receiver.html, where I can then retrieve these id and q variables. As we all know, ...

What is the best method for initializing the value of ng-model as an empty string in AngularJS?

I need help setting the initial value for an attribute in my model. Here's the code I'm using: <input type="text" ng-model="selectedModel.title" name="title" value="" > What I want is for the attribute value to be initially set as an empt ...

Steps to create a zigzagging line connecting two elements

Is it possible to create a wavy line connecting two elements in HTML while making them appear connected because of the line? I want it to look something like this: Take a look at the image here The HTML elements will be structured as follows: <style&g ...

Adding a div after a specific child in a bootstrap grid

I've been searching tirelessly, but I just can't seem to crack this puzzle... In my Bootstrap grid, I'm faced with the challenge of injecting a div upon click after the row where the clicked div is located. For instance, I have a series of 5 ...

The presence of whitespace is causing disruptions in the text alignment within div elements

I've noticed some unwanted white space on my website when viewing it in Chrome and Internet Explorer. It's interrupting the flow of text and I can't figure out where it's coming from. Can someone help me locate and remove this pesky wh ...

It appears that the imports are missing in both index.js and app.js in React

Recently, I embarked on creating a React app, and after setting up the basic structure, I noticed that it isn't displaying as expected. I followed the necessary steps, including using npx create, npm install, and start. import React from 'react& ...

Implementing Ajax calls and retrieving JSON arrays within Laravel 5

I'm just diving into the world of "AJAX" and have been experimenting with sending a request "ONSELECT" using "AJAX" in order to receive a "JSON" response in "laravel 5". Below is my View setup: <select> <option data-id="a" value="a">a< ...

Executing Automated HTTP Calls

Working with a team that is tasked with manually filling out numerous web forms to add users to their company's database can be quite tedious. I have experience creating web automation scripts using VBScript, Java (utilizing Selenium WebDriver), and i ...

The Firefox form is experiencing issues when the cursor is set to 'move'

I have an HTML form with a specific code snippet: #stoppage_section .stoppage{ cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } <div id="st ...

Steps to activate the image viewer for each individual looping image:

I'm struggling with my JavaScript code that fetches images and displays them in a modal view when clicked. The issue I'm facing is that the image view only works for the second and other images, but not for the first one. I know there are issues ...

Utilizing hyperlinks to dynamically remove elements from a webpage with the power of HTML5 and JavaScript

Looking for guidance on how to create a link that will remove two specific list items from an unordered list located above the link. As a beginner, any assistance is greatly appreciated! ...

Check to see if an array contains any falsy values and return accordingly

My goal is to only return the error message if any value is falsy, and never return the hooray message. I am utilizing lodash. var jawn = [ { "cheese" : true, "with" : true, "without" : true }, { "cheese" ...

How can I expand all primary accordions while keeping secondary accordions collapsed?

I have a main accordion with nested accordions within each item. My goal is to only expand the main level accordions when clicking the button, without opening the nested ones. I want to open all "Groups" accordions while keeping the sub-accordions labeled ...

Reopen a Kendo UI dialog

Currently, I am utilizing Kendo UI, and my goal is to display a modal dialog when a button is clicked. The issue I am facing is that it works perfectly the first time around. However, upon closing the dialog and attempting to reopen it by clicking the butt ...

Transforming a string containing numerical arrays into their corresponding values

I'm currently tackling a coding task that involves receiving a text input from the user in a specific format like shown below: value = "[1, 2, 3, 4]\n[9, 8, 7, 6]\n[1, 2, 3, 4]"; When using .split, the value is transformed into an array ...

What is the importance of context in the subscription method of RxJS or Angular Observables?

In the given situations, I am providing a child Component with a property that is updated later through an RxJs Observable subscription. Angular fails to detect changes when not using an anonymous function or binding the this context. // Situation 1 // C ...

Error: The JavaScript function you are trying to use is not defined

Hi there, I'm new to javascript and angularjs. I've created a function in my controller to open a website when clicking on a button. However, I'm encountering an error message saying ReferenceError: openWebsite is not defined when trying to ...