Javascript 单击按钮时重复下拉列表

目前我有这个设置。 “我的页面”加载时有两个相邻对齐的下拉列表和一个“添加”按钮。 “添加”按钮使用函数addRow（）在下一行中添加下拉列表。 不过，该函数可能是最糟糕的实现

a） 我希望ADD按钮将两个类似的下拉列表添加到下一行，这些下拉列表最初与页面中的相邻列表对齐。（现在代码只在下一行添加1个下拉列表）

b） 有没有办法让我的添加按钮位于我的下拉列表下方，而不是位于第一行下拉列表的旁边

下面是代码

<div class="container">
        <table>
                <tr>



<td>
<select id="soflow">
  <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
  <option>Select an Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select id="soflow">
    <!-- This method is nice because it doesn't require extra div tags, but it also doesn't retain the style across all browsers. -->
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>

 <button class = "button" type="button" onClick ="addRow(this)">Add</button></td>

</tr>
</table>

</div>

<script>
    function addRow(btn) {         
        var parentRow = btn.parentNode.parentNode;
        var table = parentRow.parentNode;
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        //var element2 = document.createElement("input");
        var element2 = document.createElement("select");
        element2.setAttribute("id", "soflow")
        //element2.type = "select";
        var option1 = document.createElement("option");
        option1.innerHTML = "Option1";
        option1.value = "1";
        element2.add(option1, null);
        var option2 = document.createElement("option");
        option2.innerHTML = "Option2";
        option2.value = "2";
        element2.add(option2, null);
        cell1.appendChild(element2);
    }
</script>

选择一个选项
选择1
选择2
选择一个选项
选择1
选择2
添加
函数addRow（btn）{
var parentRow=btn.parentNode.parentNode；
var table=parentRow.parentNode；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var cell1=行插入单元格（0）；
//var element2=document.createElement（“输入”）；
var element2=document.createElement（“选择”）；
element2.setAttribute（“id”、“soflow”）
//element2.type=“选择”；
var option1=document.createElement（“选项”）；
option1.innerHTML=“option1”；
选项1.value=“1”；
元素2.添加（选项1，空）；
var option2=document.createElement（“选项”）；
option2.innerHTML=“option2”；
选项2.value=“2”；
元素2.添加（选项2，空）；
单元格1.附加子元素（元素2）；
}

---

谢谢您的帮助。

您可以使用

for

循环两次并创建两个

选择
s。如果希望在为选择项向表中添加新行时，按钮始终位于选择项（添加的和初始的）下，则应将其移动到表外

此外，不能有多个元素具有一个
id
。最初，您有两个id为“soflow”的
id
，单击
add
按钮后将添加更多元素

要计算已添加的
select
s的数量，只需在函数内的
for
循环每次运行时增加一个全局变量即可



选择一个选项
选择1
选择2
选择一个选项
选择1
选择2


添加
var addedSelects=0//添加的下拉列表总数
函数addRow（btn）{
var table=document.getElementById（'selectTable'）；
var soflow=document.getElementById（“soflow2”）；
var rowCount=table.rows.length；
var行=document.createElement（'tr'）；
表2.追加子项（行）；
//var element2=document.createElement（“输入”）；
var td=document.createElement（'td'）；
世界其他地区（td）；
for（设i=0；i<2；i++）{
var element2=document.createElement（“选择”）；
//element2.setAttribute（“id”，“soflow”+（i+1））
//element2.type=“选择”；
var option1=document.createElement（“选项”）；
option1.innerHTML=“option1”；
选项1.value=“1”；
元素2.添加（选项1，空）；
var option2=document.createElement（“选项”）；
option2.innerHTML=“option2”；
选项2.value=“2”；
元素2.添加（选项2，空）；
td.附加儿童（要素2）；
addedSelects++；
}
}
您可以使用
for
循环两次并创建两个
选择。如果希望在为选择项向表中添加新行时，按钮始终位于选择项（添加的和初始的）下，则应将其移动到表外

此外，不能有多个元素具有一个
id
。最初，您有两个id为“soflow”的
id
，单击
add
按钮后将添加更多元素

要计算已添加的
select
s的数量，只需在函数内的
for
循环每次运行时增加一个全局变量即可



选择一个选项
选择1
选择2
选择一个选项
选择1
选择2


添加
var addedSelects=0//添加的下拉列表总数
函数addRow（btn）{
var table=document.getElementById（'selectTable'）；
var soflow=document.getElementById（“soflow2”）；
var rowCount=table.rows.length；
var行=document.createElement（'tr'）；
表2.追加子项（行）；
//var element2=document.createElement（“输入”）；
var td=document.createElement（'td'）；
世界其他地区（td）；
for（设i=0；i<2；i++）{
var element2=document.createElement（“选择”）；
//element2.setAttribute（“id”，“soflow”+（i+1））
//element2.type=“选择”；
var option1=document.createElement（“选项”）；
option1.innerHTML=“option1”；
选项1.value=“1”；
元素2.添加（选项1，空）；
var option2=document.createElement（“选项”）；
option2.innerHTML=“option2”；
选项2.value=“2”；
元素2.添加（选项2，空）；
td.附加儿童（要素2）；
addedSelects++；
}
}
您有两个同名的ID。将ID属性更改为两个select元素（如
&&
）具有不同的名称，并在Javascript中将每个元素称为
soflow1
或
soflow2
）。您的JavaScript引用了两个ID元素，并通过一次调用打开了两个下拉列表

ID应该只对一个元素唯一

要在这些下拉元素中使用相同的样式，请添加一个类属性，该属性与选择
&&
等元素以及为
.myDropdownClass{//some style}
创建CSS的属性相同

将按钮放在可以执行的选择元素下面
<table>
    <tr>
        <td><select id="soflow1" class="myDropdownClass" ... /></td>
        <td><select id="soflow2" class="myDropdownClass" ... /></td>
    </tr>
    <tr>
        <td colspan="2"><button>text</button></td>
    </tr>
</table>

<table>
  <tbody>
    <tr>
      <td>
        <select class="solflow">
          <option>Select an Option</option>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
        <select class="solflow">
          <option>Select an Option</option>
          <option>Option 1</option>
          <option>Option 2</option>
        </select>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <button class="button add" type="button">Add</button>
        <button class="button remove" type="button">Remove</button>
      </td>
    </tr>
  </tfoot>
</table>
<script>
  function tableClickHandler(e) {
    if (e.target.classList.contains('add')) {
        let tbody = this.querySelector('tbody');
        let row = tbody.querySelector('tr');
        tbody.appendChild( row.cloneNode(true) );
    }
    if (e.target.classList.contains('remove')) {
        var tbody = this.querySelector('tbody');
        var row = tbody.querySelectorAll('tr');
        if (row.length > 1) {
          tbody.removeChild(row[row.length-1]);
        }
    }
  }

  function tableChangeHandler(e) {
    if (e.target.classList.contains('solflow')) {
      let solflows = this.querySelectorAll('.solflow');
      let solflow = e.target;
      let index = -1;
      solflows.forEach(function(el, ind){
        if (el === solflow) { index = ind }
      });
      console.log(index, solflow.value);
    }
  }

  document.querySelector('table').addEventListener('click', tableClickHandler);
  document.querySelector('table').addEventListener('change', tableChangeHandler);
</script>