Question

我有一个可以使用原生javascript动态增加的表单。

function plus(){
  var myHTML = '\
  <select id="one"  name="one"> \
    <option value="001">one</option> \
    <option value="002">two</option> \
    <option value="003">three</option> \
    <option value="004">four</option> \
  </select>';

  document.getElementById("divpos").innerHTML = document.getElementById("divpos").innerHTML + myHTML;
}

这样可以正常工作，但如果我选择其中一个选项并添加另一个选项，则先前添加的选项将重置为其默认值（或第一个可用选项）。给出的例子：

添加选择＃1
选择＃1：两个
添加选择＃2
选择＃1：一个
选择＃2：一个

它应该像

添加选择＃1
选择＃1：两个
添加选择＃2
选择＃1：两个
选择＃2：一个

我认为只需点击左键即可明确设置＆＃34;选择＆＃34;属性。如果设置了此项，则不会重置以前的值。我尝试使用Google Chrome开发者选项，设置选择的任何值按预期工作。我有什么想法可以解决这个问题吗？

注意：我确实更改了每个新选择的ID和名称。我有一个打印我的HTML页面的Perl-CGI脚本。所以这里没有重复的ID或名称。

Answer 1

id属性必须是唯一的。由于您的所有选择都有id="one"（同样适用于name），因此它始终会更新您上次添加的选择。让它更有活力：http://jsfiddle.net/np8kp9aj/

function plus(idName) {
  var options = ['one', 'two', 'three', 'four'];
  var select = document.createElement('select');

  select.id = idName;
  select.name = idName;

  for(index in options) {
    var opt = document.createElement('option');
    opt.value = index;
    opt.innerHTML = options[index];

    select.appendChild(opt);
  }

  document.getElementById("divpos").appendChild(select);
}

Answer 2

问题是因为这一行document.getElementById("divpos").innerHTML = 更改innerHTML以便更新DOM并丢失当前选定的值。

你能做的是

function plus(){
    var myHTML = '<select id="anid"  name="aname"> \
        <option value="001">one</option> \
        <option value="002">two</option> \
        <option value="003">three</option> \
        <option value="004">four</option> \
      </select>';

    var div = document.createElement('div');
    div.innerHTML = myHTML;
    document.getElementById("divpos").appendChild(div.firstChild);
}

Answer 3

要选择一个选项，您必须设置

<option selected="selected">

Answer 4

我总是发现直接的DOM操作更整洁。试试这个：

function plus(name) {
    var sel = document.createElement('select');
    sel.name = name;
    sel.id = name;
    var op1 = document.createElement('option');
    op1.value = '001';
    op1.innerHTML = 'one';
    sel.appendChild(op1);
    var op2 = document.createElement('option');
    op2.value = '002';
    op2.innerHTML = 'two';
    sel.appendChild(op2);

    document.getElementById('divpos').appendChild(sel);
}

这只是在表单中附加一个新元素。它不会覆盖现有元素。因此，它不应该干扰它们。

浏览器不会在选项标签上设置所选属性

4 个答案: