Question

您好我是java脚本的新手我编写代码生成一个文本框，通过选择下拉选项1和两个文本框选择下拉2但我在文本框中获取值如select_0和select_ 1 ....这是我的代码

<html>
<script type="text/javascript">

        window.onload = function()
        {
            var select = document.getElementById("select");
            var texts = document.getElementById("texts");
            select.onchange = function()
            {
                var val = select.options[select.selectedIndex].value;
                texts.innerHTML = "";
                for(i=0; i < val; i++)
                {
                    texts.innerHTML += '<div><input type="text" name="t_' + i + '" value="select_' + i + '" /></div>';
                }
            }
        }

    </script>
<body>
    <form method="POST" action="connection.php">
Question:<br>
<textarea name="question" cols="35" rows="5"></textarea><br>
<select id="select" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<div id="texts"></div>
<input type="submit" name="Submit" value="Submit" >
</form>
</body>
</html>

请建议我不要在文本框内输入值。我不知道我哪里出错了。谢谢提前

Answer 1

文本输入的'value'属性是文本框中的文本。如果您不希望在文本框中显示该内容，请执行以下操作：

    texts.innerHTML += '<div><input type="text" name="t_' + i + '" /></div>';

Answer 2

有一种比使用innerHTML更好的方法，但是现在我感觉很懒。只需在设置文本输入时删除value = part，并将innerHTML设置在循环之外，因为设置innerHTML是一种昂贵的（处理），不应该在循环中使用。

    window.onload = function()
    {
        var select = document.getElementById("select");
        var texts = document.getElementById("texts");
        select.onchange = function()
        {
            var val = select.options[select.selectedIndex].value,
            //set the innerHTML one time using ret (Array)
            ret=[];
            texts.innerHTML = "";
            for(i=0; i < val; i++)
            {
                // do not set value property:
                ret.push('select_' + i + ': <div><input type="text" name="t_' 
                  + i + '"/></div>');
            }
            // set innerHTML here
            texts.innerHTML = ret.join("");
        }
    }

使用下拉列表生成动态文本框

2 个答案: