Question

我想实现动态选择框。我已经完全成功了，但是当我的页面被提交时，我的价值就不存在了请参阅下面的代码

<select name="frm_child" id="frm_child" style="width:50px;" onchange="addFLd(this.value)" >
         <option value="0" >0</option>
            <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>
        </select

childDynamic div中的动态字段显示。哪个在form标记内？但是当我提交表单时，我无法从选择框中看到结果。请参阅下面的我的js代码

<div id="childDynamic" style="display:none;">
      <input type="text" name="child1" value="" />
      </div>

我的JavaScript代码ID

<script type="text/JavaScript">
Function addFLd(val){
var d=document.getElementById("childDynamic");
d.style.display='block';
d.innerHTML="";
    if(val!=0){

            d.innerHTML="<b>Please specify the ages of children:</b><br><br>";
            for(var i=1;i<=val;i++){
            if(i%2!=0 && i!=1){
            d.innerHTML+="<br><br>";
            }
            var name='child'+i;
            d.innerHTML+="&nbsp;&nbsp;Child "+i+": ";
            d.innerHTML+="&nbsp;<select name='"+name+"' id='"+name+"'><option value=''>--select--</option><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><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option>";

            d.innerHTML+="</select>";
            }
            d.innerHTML+="<br><br>";
             document.getElementById('childDynamic').appendChild(d);

                }
}
</script>

有没有人知道如何添加动态字段并使用表单元素获取值？

Answer 1

在您的代码中，您可以使用for循环从0到17替换所有选项元素的整个字符串，例如

for (var age = 0; age < 18; age++) {
      d.innerHtml += "<option value='" + age + "'>" + age + "</option>"
   }

虽然我觉得编码不是那么好，但仍然按照你的方式继续使用innerHTML。

一种替代方法是使用一个名为“selectHtml”的变量并将代码添加到该变量并进行设置 d.innerHTML最后选择HTML。

Answer 2

或许更好的选择是在原始标记中包含表单输入，而不是在必要时附加它们，只需删除disabled="disabled"属性并删除display:none样式以显示它们即可启用它们。页面。

我认为您可以通过跨浏览器支持获得更多运气，因为有些人不会动态添加表单元素。

或者，我建议使用javascript框架来执行追加，例如jQuery。

有关如何将表单元素附加到页面的详细信息，请参阅此链接：

http://api.jquery.com/append/

动态地将字段添加到表单中并在操作页面中显示值

2 个答案: