通过单击链接添加新的下拉菜单框答案

【问题标题】：Adding a new dropdown menu box with a click of a link通过单击链接添加新的下拉菜单框
【发布时间】：2013-01-14 21:56:11
【问题描述】：

下面是一个添加新下拉菜单框的 javascript 函数。它可以工作，但是当我在选择名称中输入name 并在选项值中输入value 时，它将不起作用。

function add() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = "<select> <option> Apple </option> <option> Orange </option> </select>";  
}

问题可能是什么？谢谢！

【问题讨论】：

你是怎么调用这个函数的？
<a href="#" onclick="add();">Add another?</a> 和 <div id="myDiv"> 指定放置添加的下拉菜单的位置。
id = 'theValue' 的元素在哪里？
我在a href之前有<input type="hidden" value="0" id="theValue" />。

标签： javascript html drop-down-menu

【解决方案1】：

您还需要将元素放置/附加到正文。以下是您需要在函数中添加的内容：

document.body.appendChild(newdiv);

检查output/usage。

【讨论】：

谢谢！所以我对你的建议做了一些小的修改。我只是这样做了：if($ctr<5){ ni.appendChild(newdiv); $ctr++; } 来限制点击次数。但是每当我在选择名称中添加name 并在选项值中添加value 时，它都不起作用。

【解决方案2】：

如果您使用双引号定义该字符串，则需要转义 innerHTML 字符串中的双引号：

newdiv.innerHTML = "<select name=\"name\"> <option value=\"value\"> Apple </option> <option> Orange </option> </select>";

或者，使用单引号来定义字符串，或 HTML 属性值（虽然标准是 HTML 属性的双引号）

【讨论】：

谢谢！因此，如果需要，我仍然可以访问这些值吗？