创建的动态元素未发布

Question

在用户从另一个选择元素做出选择后，我动态创建一个 HTML 选择元素。然而，用于检查表单的 PHP 脚本无法识别新元素并指示它为空。

以下是片段：

some.js：

if(document.getElementById(firstselect).value=='somvalue'){
    document.getElementById(gamsDiv).removeChild(gamsElem);
    gamsElem = document.createElement("select");
    gamsElem.id = "FacilityGamsId";
    gamsElem.name = "FacilityGamsId";
   gamsElem.setAttribute("onChange", "updateHidden(this);makeUpdateRequest(arguments[0],this)");                    
    opt = document.createElement("option");
    opt.text="Select one ";
    opt.value=0;
    gamsElem.options.add(opt);
    .....some other stuff
    .....                           
    document.getElementById(gamsDiv).appendChild(gamsElem);

}

PHP 脚本：

if($_POST){
    var_dump($_POST['FacilityGamsId'];
}

result: null

服务器 post 操作无法识别 JS 脚本中的任何动态 HTML 元素是否有任何原因。如果我检查/检查新创建的元素，名称和 id 完全相同。

Answer 1

它不会添加到存储在浏览器 DOM 中的表单中。

这个人试图做同样的事情：创建的动态元素未发布

一个解决方案是在服务器端构建动态表单 - 如果它确实需要在客户端，我认为您需要在以下位置操作表单（存储在 document.forms 中）：除了 DOM 之外。

Answer 2

这里：

gamsElem.options.add(opt);

add 是一种方法选择元素界面，而不是 <一个href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-30606413" rel="nofollow">选项（这是一个 HTMLElement Collection 并且没有 add< /em> 方法）。所以：

gamsElem.add(opt);

应该解决这个问题。
请注意 gamsElem.add(opt);在 Mozilla firefox 6 中不起作用，所以我恢复到我的旧代码 gamsElem.options.add(opt)。

而且：

gamsElem.setAttribute("onChange",
 "updateHidden(this);makeUpdateRequest(arguments[0],this)");                    

会更好：

gamsElem.onchange = function() {
    updateHidden(this);
    makeUpdateRequest(arguments[0], this);
};                    

虽然我不知道参数是什么[ 0] 应参考。

这是通常如何完成的（尽管按钮会调用一个函数而不是一段内联代码，我这样做只是为了方便起见）：

<form action="">
  <div id="div0">
    <select id="sel0" name="sel0">
      <option>option 0
    </select>
    <input type="submit">
  </div>
</form>

<button onclick="
  var div = document.getElementById('div0');
  var sel = document.getElementById('sel0');
  div.removeChild(sel);
  sel = document.createElement('select');
  sel.id = 'sel1';
  sel.name = 'sel1';
  sel.onchange = function(){alert(this.value);};
  sel.options[0] = new Option('Select one', '0');
  sel.options[1] = new Option('Select two', '1');
  div.appendChild(sel);
  ">Replace select</button>

需要第二个选项来获取 onchange< /em> 侦听器开火。

如果您想用另一个元素替换一个元素，请创建新元素，然后替换旧元素：

<button onclick="
  var oldSel = document.getElementById('sel0');
  var sel = document.createElement('select');
  sel.id = 'sel1';
  sel.name = 'sel1';
  sel.onchange = function(){alert(this.value);};
  sel.options[0] = new Option('Select one', '0');
  sel.options[1] = new Option('Select two', '1');
  oldSel.parentNode.replaceChild(sel, oldSel);
  ">Replace select</button>

或者您可以只替换选项（将选择的 options.length 设置为零，然后添加新元素）。

Answer 3

您必须将新元素添加到 FORM 标记中

Answer 4

DOM 准备好后运行此代码，最好是 jquery 中的 $.ready() 。

并在 div 名称周围加上引号（“gamsDiv”）