使用数据库中的数据动态填充JSP中的下拉列表

Question

我通过按钮点击动态生成元素，如下所示。

javascript，有助于生成多个表格行

<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>

输出如下所示。

我在数据库中有一个表格 car_groups ，列 grp_id，grp_name 。我需要使用 car_groups 表中的值动态填充上面的下拉列表。

动态生成的下拉应如下所示。 grp_id为值，grp_name为显示。

<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>

我怎样才能实现这个目标？

Answer 1

你需要在该函数中的select中动态添加选项。

        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);    

我不知道您的后端语言，因此您必须通过在后端循环数据集来动态创建添加选项行。

更好的方法是使用jquery或其他东西进行DOM操作，并创建数据集的json以便在javascript中使用。