Question

    var serviceGroupName = document.querySelectorAll('packageGroupName').value;
    var sourceType = document.getElementById("multiple-checkboxes");
    
    if (serviceGroupName !== '')
    {
         var serviceArray = [];
         for (i = 0; i < sourceType.selectedOptions.length; i++) 
         {
            serviceArray.push(parseInt(sourceType.selectedOptions[i].value));
         }
          var groupName = {};
          groupName[serviceGroupName] = serviceArray;
          ungroupedServiceArray = [];
            
    }

document.getElementById('addGroup').onclick = duplicate;

var i = 0;
var original = document.getElementById('addService');

function duplicate()
{
  var clone = original.cloneNode(true);
  clone.id = "addService1" + ++i; 
  original.parentNode.appendChild(clone);
}

<div id="addService">
   <p><b>Service Group Name: </b></p>
   <div class="form-group">
      <input type="text" class="packageGroupName" id="packageGroupName" minlength= 1 placeholder=" Group Name" >
    </div>
                
    <p><b>Add Services</b></p>
    <div class="form-group">
        <select id="multiple-checkboxes" multiple="multiple" class='packageGroupName'>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
        </select>
    </div>
    <div class="form-group">
        <label for="exampleFormControlTextarea1"></label>
        <button type="button" class="btn btn-primary" onclick="duplicate()" id="addGroup">Add </button> 
    </div>
</div>

我试图遍历所有具有相同ID的未定义HTML元素。原因是，每次用户单击表单上的按钮时，它都会创建一个新的文本字段并下拉菜单，该文本字段与原始文本字段相同。

我希望从文本框中获取一个字符串值，并从多选列表中获取多个值，并将它们关联在一起，其中字符串值是键，而下拉列表中的多个值就是这些值。

这是到目前为止我拥有的javascript代码：这是从文本字段和多选列表中获取数据

var serviceGroupName = document.querySelectorAll('packageGroupName').value;
var sourceType = document.getElementById("multiple-checkboxes");

if (serviceGroupName !== '')
{
     var serviceArray = [];
     for (i = 0; i < sourceType.selectedOptions.length; i++) 
     {

         serviceArray.push(parseInt(sourceType.selectedOptions[i].value));
     }
      var groupName = {};
      groupName[serviceGroupName] = serviceArray;
      ungroupedServiceArray = [];
}

这就是我希望最终输出看起来的样子。基本上，不管用户多次创建一个新的文本框和多选择列表，它都会创建以下输出：

 "Textbox value": [  
     multiselect_values,
     multiselect_values,
     multiselect_values,
     multiselect_values
 ]
"Textbox value2":[
     multiselect_values2,
     multiselect_values2,
     multiselect_values2
 ]

Answer 1

正如其他人所说，您需要使用类名而不是仅使用id。使用<div id="addService">"代替<div id="addService" class="service">。

然后在您的代码中您将执行以下操作：

var servicelist = document.querySelectorAll('.service')

for(var i=0; i<servicelist.length; i++){
    var serviceGroupName = servicelist[i].querySelector('input.packageGroupName').value;
    var sourceType = document.querySelector("select.packageGroupName");
    ..... the rest of your code
}

遍历具有相同ID的多个HTML元素，并使用其数据构建对象

1 个答案: