使用JS动态添加下拉列表表

时间:2017-01-20 13:20:19

标签: javascript html

我想动态创建一个下拉列表表。 这是程序: 1)在表格的第一行的第一个单元格中出现一个选择框,其中包含很少的选项。 2)当用户点击某个选项时,第一行的第二个单元格中会出现另一个选择框。 3)在第三个单元格中,必须单击一个按钮,这将在第一个点中添加一个带有选择框的新行。

<html>
<head>
    <title>Search</title>
    <script type="text/javascript">
        var noRows = 1;
        function func(){
            var t = document.getElementById('searchTable');
            var r = table.insertRow(noRows);
            var col = row.insertCell(0);
            var colNames = document.createElement('select');
            colNames.id = 'colNames0';
            colNames.name = 'colNames' + noRows;
            colNames.onchange = populate;
            colNames.options[0] = new Option('Select','');
            for(var i = 0;i < cols.length;++i){
                colNames.options[i+1] = new Option(cols[i],ids[i]);
            }
            colCell.appendChild(colNames);
        }
        function populate(){
            var sel = document.getElementById("colNames" + noRows);
            var col = sel.options[sel.selectedIndex].id;
            if(col == "int"  || col == "date" || col == "time")
                populateInt();
            else
                populateString();
        }
    </script>
</head>
<body onload="func();">
    <table id="searchTable">
    </table>    
</body>

这是我开始的代码。我在第一行的第一个单元格中动态创建了选择框,但无法获取所选选项并创建其他选择列表。

1 个答案:

答案 0 :(得分:1)

我没有看到int,date或time被指定为任何选项的id和其他东西

var col = sel.options[sel.selectedIndex].id;

而不是这一行,你可以写如下

var col = sel.options[sel.selectedIndex].getAttribute('id');