javascript - 如何在按钮单击时将填充的选择字段添加到表单中

Question

我有一个表单，用户可以在其中选择一个选项然后提交，我想添加一个按钮，将另一个选择选项添加到表单中。以便用户可以提交两个或多个选项

<form action="#" method="get">
<button type="button" onclick="add_field()">Add another field</button>
<select>
{%for each in mechanic_list %}

  <option name="Mechanic_" value={{each.id}}>{{each.DESCRIPTION}}</option>

  {%endfor%}
  </select>
  <input type="submit" value="Submit">
</form>

<script>    
    function add_field() 
    {
    var form = document.getElementsByTagName('form')[0],
    input = document.createElement('select');

    input.setAttribute('type', 'select');
    input.setAttribute('name', 'pet');
    form.appendChild(input);
    };
    </script>

上面的代码将填充第一个选择框，并有一个添加空选择字段的按钮(在提交之后，由于某种原因)

两个问题 1.如何填充添加的选择字段 2. 如何将新字段移至提交按钮的右侧。

需要注意的一件事是，我正在使用 Django Web 框架并使用 for 循环来填充选择值。

这是一个 JSfiddle http://jsfiddle.net/5Jr8N/59/ (没有for循环)

谢谢

编辑/更新 HTML 脚本编码

<script>    
        function add_field() {
            var container = document.getElementById('selects'),
                input = document.createElement('select');
            var opt = document.createElement("option");
            {% for each in mechanic_list %}
            opt.value = "{{each.id}}";
            opt.innerHTML = "{{each.DESCRIPTION}}";
            {%endfor%}
            input.appendChild(opt);
            input.setAttribute('type', 'select');
            input.setAttribute('name', 'pet');
            container.appendChild(input);
          };
    </script>

html 脚本作为“渲染”(提供给浏览器/从浏览器“查看源代码”)

<script>    
        function add_field() {
            var container = document.getElementById('selects'),
                input = document.createElement('select');
            var opt = document.createElement("option");

            opt.value = "dd";
            opt.innerHTML = "dd";

            opt.value = "TT";
            opt.innerHTML = "Test for";

            input.appendChild(opt);
            input.setAttribute('type', 'select');
            input.setAttribute('name', 'pet');
            container.appendChild(input);
          };
    </script>

所以这是有效的，只是它只显示最后一个值而不是两个/所有值。这太近了，我能尝到它的味道。

如何获取两个/所有值而不仅仅是最后一个值？

Answer 1

“填充添加的选择”是什么意思？

更改新选择字段换行现有位置 <select>进入<span>并将新选择附加到此 <span> 。填充原始 <select> 中的选项只需复制 innerHTML来自它:

<form action="#" method="get">
  <button type="button" onclick="add_field()">Add another field</button>
  <span id="selects">
    <select id="orig_select">
    {% for each in mechanic_list %}
      <option name="Mechanic_" value={{each.id}}>{{each.DESCRIPTION}}</option>
    {%endfor%}
    </select>
  </span>
  <input type="submit" value="Submit">
</form>

<script>    
    function add_field() {
      var container = document.getElementById('selects'),
          input = document.createElement('select');

      input.innerHTML = document.getElementById('orig_select').innerHTML;

      input.setAttribute('type', 'select');
      input.setAttribute('name', 'pet');
      container.appendChild(input);
    };
</script>