Dynamically populate drop down list in JSP with data in database

Question

I'm dynamically generating elements with button click as below.

javascript which helps in generating multiple table rows

<SCRIPT language="javascript">
        function addRow(tableID) {
            var table = document.getElementById(tableID);    
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name = "checkbox";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "car";
            cell2.appendChild(element2);

            var cell3 = row.insertCell(2);
            var element3 = document.createElement("select");
            element3.name = "group";                        
            cell3.appendChild(element3);    
        }    
</SCRIPT>

Html

<form name="frm01" action="#" method="post">

    <TABLE id="tblData" width="300px" border="0">
        <tr>
            <td></td>
            <td><b>Car</b>
            </td>
            <td><b>Group</b>
            </td>
            <td><INPUT type="button" value="Add Row"
                onclick="addRow('tblData')" /></td>
        </tr>
    </TABLE>

    <br> <input type="submit" value="submit" name="submit">

</form>

Output looks like below.

form elements

I have a table in database as car_groups with columns grp_id, grp_name. I need to dynamically populate drop down in above with values in car_groups table.

Dynamically generated drop down should as below. grp_id as value and grp_name as display.

<select id="grp_select" name="grp_select">
 <option></option>
 <option value="1">Group A</option>
 <option value="2">Group B</option>
 <option value="3">Group C</option>                             
</select>

How can i achieve this ?

On a related note, you have tagged Java for this question. Java != JavaScript. You don't appear to be using Java, or are you? — Jack
– Jack, Commented Jun 19, 2014 at 16:43
Great! I'm sure you'll get more relevant traffic to your question now. — Jack
– Jack, Commented Jun 19, 2014 at 16:46
It seems you have added HTML part of your code. Can you show us what you have done in either servlets or jsp? — Vinoth Krishnan
– Vinoth Krishnan, Commented Jun 19, 2014 at 17:38

user3754372 · Accepted Answer · 2014-06-19 17:59:05Z

1

you need to dynamically add option inside select in that function.

        var cell3 = row.insertCell(2);
        var element3 = document.createElement("select");
        element3.name = "group";      
        element3.options[0] = new   Option("Group A","1");
        element3.options[1] = new   Option("Group B","2");
        element3.options[2] = new   Option("Group C","3");
        cell3.appendChild(element3);

i dont know your backend language so you have to create the adding option lines dynamically by looping over your dataset in backend.

a better approach is to use jquery or something for DOM manipulation and create json of dataset for use in javascript.

answered Jun 19, 2014 at 17:59

user3754372

1871 silver badge16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bishan Over a year ago

Thanks for your answer. I'm using servlets jsp.

Collectives™ on Stack Overflow

Dynamically populate drop down list in JSP with data in database

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related