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/（没有循环）

感谢

修改/更新 已编码的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>

如何在按钮点击时添加填充的选择字段以形成表单

1 个答案: