Question

单击后，用户可以将组合（选择选项+输入字段）动态添加到带有（城市代码和电话号码）的表单中，需要使用这些字段的输入值在对象中进行检索。

//Code that retreive the input values:

var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = [].map.call(number_el, function(input) {

  return {
    'telefone': input.value
  };

});

console.log(telefoneNumber);

<div id="phone">
  <p>Telephone</p>
  <select name="city_code" id="telephone_1" class="telephoneList">
    <option value="1">212</option>
    <option value="2">216</option>
    <option value="3">215</option>
  </select>

  <input type="text" name="phone_number" id="phone_input1" value="555-222555"> </br>

  <p>Telephone</p>
  <select name="city_code" id="telephone_1" class="telephoneList">
    <option value="1">212</option>
    <option value="2">216</option>
    <option value="3">215</option>
  </select>

  <input type="text" name="phone_number" id="phone_input2" value="555-666555">
</div>

上面的代码检索对象中输入的telefone：values。

我需要循环抛出select选项以获取其值并添加到对象中，如下所示：

元素名称可以用作Telefone和city_code的属性名称。

telephoneList: [
  {
   "telefone":555-222555, 
   **"city_code":1**
  },
  {
   "telefone":555-666555, 
   **"city_code":2**
  }
]

Answer 1

您可以使用属性previousElementSibling来获取上一个元素select。

这是假定上一个元素始终是select element。

//Code that retreive the input values:

var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = Array.from(number_el).map(function(input) {
  var object = {
    'telefone': input.value,
    'city_code': input.previousElementSibling.options[input.previousElementSibling.selectedIndex].value
  }
  
  return object;
});

console.log(telefoneNumber);

<div id="phone">   <p>Telephone</p>   <select name="city_code" id="telephone_1" class="telephoneList">     <option value="1">212</option>     <option value="2">216</option>     <option value="3">215</option>   </select>    <input type="text" name="phone_number" id="phone_input1" value="555-222555"> <br>    <p>Telephone</p>   <select name="city_code" id="telephone_1" class="telephoneList">     <option value="1">212</option>     <option value="2">216</option>     <option value="3">215</option>   </select>      <input type="text" name="phone_number" id="phone_input2" value="555-666555">    </div>

从多个选择选项列表中创建对象并输入

1 个答案: