如何使用JavaScript创建动态下拉菜单_Javascript_Html

如何使用JavaScript创建动态下拉菜单

javascript html

如何使用JavaScript创建动态下拉菜单,javascript,html,Javascript,Html,我有它，所以你在表单上键入一个最大数字，然后它在点击一个按钮后创建一个表我希望这样，当你点击按钮添加行后，它会在表格中写一个下拉菜单，从0到你在表格中输入的数字这是我的HTML代码： <html> <head> <title>Form Generator</title> <link rel="stylesheet" type="text/css" href="../css/converter.css"/> &

我有它，所以你在表单上键入一个最大数字，然后它在点击一个按钮后创建一个表

我希望这样，当你点击按钮添加行后，它会在表格中写一个下拉菜单，从0到你在表格中输入的数字

这是我的HTML代码：

<html>
<head>
    <title>Form Generator</title>
    <link rel="stylesheet" type="text/css" href="../css/converter.css"/>
    <script language="JavaScript" src="../js/exercise2.js" type="text/javascript">
    </script>
</head>
<body>
<p>
    <button class="button" data-modal="M2KM">Form Generator</button>
</p>
<div id="M2KM" class="modal">
    <div class="modal-content">
        <div class="form">
            <a class="close">&times;</a>
            <form action="">
                <textarea rows="1" name="Section" id="Section" cols="10">Section</textarea>
                <textarea rows="1" name="Max" id="Max" cols="10">Max</textarea>
                <textarea rows="1" name="Comment" id="Comment" cols="10">Comment</textarea>
                <textarea rows="1" name="Mark" id="Mark" cols="10">Mark</textarea>
                <input type="button" value="Add Row" name="Add Row" onclick="conversionTable('table')" />
                <input type="reset" value="Clear" name="Clear">
            </form>
            <div id="conversion">
                <table id="table">
                    <thead>
                        <tr>
                            <th>Section</th>
                            <th>Max</th>
                            <th>Comment</th>
                            <th>Mark</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
</html>


表格生成器

表格生成器

下面是一个简化的示例，它添加了一个select元素，该元素的选项数量与用户输入的数量相等。

有关其工作原理的说明，请参见代码中的注释

//标识现有的HTML元素
const maxInput=document.getElementById（“max”）；
const button=document.getElementById（“按钮”）；
const table=document.getElementById（“表”）；
//单击“按钮”时调用“添加下拉列表”
按钮。addEventListener（“单击”，添加下拉菜单）；
//定义事件侦听器
函数addDropdown（event）{/（`event`对象是可用的，如果我们需要的话）
//从输入中获取值
设max=parseInt（maxInput.value）；
//如果maxInput没有数字，则提前退出函数
如果（！max）{return；}
//定义新元素
常量行=document.createElement（“tr”）；
const cell=document.createElement（“td”）；
常量下拉列表=document.createElement（“选择”）；
//枚举选项并将其添加到select元素
让optNumber=-1；
while（++optNumber嗨。你的问题不清楚。你能解释清楚吗..？你想在单击按钮时在表格中添加一行吗？当我在Chrome中运行代码段时，它总是添加1。你使用的浏览器的行为不同吗？
function   conversionTable(tagId, from, to)
{

    var section = document.getElementById("Section").value;
    var max = document.getElementById("Max").value;
    var comment = document.getElementById("Comment").value;
    var mark = document.getElementById("Mark").value;
    from = 0;
    to = 1;
    var total = 0;
    var arr = [];
    var conv = document.getElementById(tagId)  ;
    var pre = document.createElement("pre");
    conv.appendChild(pre);
    var body= conv.appendChild(document.createElement("tbody"));
    for (var i=from; i<to; i++)

    {   row = body.appendChild(document.createElement("tr"));
        var data=row.appendChild(document.createElement("td"));
        data.appendChild(document.createTextNode(section));
        data=row.appendChild(document.createElement("td"));
        data.appendChild(document.createTextNode(max));
        var data=row.appendChild(document.createElement("td"));
        data.appendChild(document.createTextNode(comment));
        data=row.appendChild(document.createElement("select"));
        data.setAttribute("id", "mySelect");
        row.appendChild(data);
        var z = document.createElement("option");
        z.setAttribute("value", "volvocar");
        var t = document.createTextNode("1");
        z.appendChild(t);
        document.getElementById("mySelect").appendChild(z);
        total = total + mark;
        var obj = {section: section, max: max, comment: comment, mark: mark};
        arr.push(obj);
    }
}