javascript - 如何将 100 个不同的选择名称及其选择的选项存储在一个对象中作为键值对

Question

我有一张动态数据表，它以表格形式在网页上显示，如图所示

图片链接：https ://ibb.co/RCYwchv

因此该表将有许多具有不同名称和值的选择标签，具体取决于发生了多少（应用程序）迭代！

foreach($data['applicationList'] as $applications){
  echo '<td><select name='.$applications['aid'].'>
  <option value=000>Reject All<option>
  <option value=111>Accept All<option>
  <option value=100>Accept 1st Choise<option>
  <option value=010>Accept 2nd Choise<option>
  <option value=001>Accept 3rd Choise<option>
  <option value=110>Accept 1st and 2nd Choise<option>
  <option value=011>Accept 2nd and 3rd Choise<option>
  <option value=101>Accept 1st and 3rd Choise<option>
  </select></td>
}

有什么办法可以捕获所有不同的选定值和名称，这些值和名称已更改并将它们绑定到键值对的对象，以使用 javascript 或 jquery ajax 将其发送到控制器？有人可以帮我解决这个问题！

标签： javascriptphpjqueryhtml

Answer 1

我假设您希望在每次更改时收集所有这些值...

所以你需要一个change处理程序，它将遍历所有select元素并将它们的键/值添加到对象中。

下面的例子应该对你有指导意义。

$(document).ready(function(){
  // This code part is just for this demo...
  // I needed to recreate multile select elements.
  for(i=0;i<10;i++){
    var clone = $("[name='someName']").clone();
    
    // Setting a different name for each
    var newName = clone.attr("name")+i;
    clone.attr("name",newName);
    $("body").append(clone);
  }
  
  
  // Now to get the values each time one is changing
  var data_obj = {};
  $("[name^='someName']").on("change",function(){
    $("[name^='someName']").each(function(){
      data_obj[ $(this).attr("name") ] = $(this).val();
    });
    
    // Result
    console.log( JSON.stringify(data_obj) );
  });
});

select{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name='someName'>
  <option value=000>Reject All<option>
  <option value=111>Accept All<option>
  <option value=100>Accept 1st Choise<option>
  <option value=010>Accept 2nd Choise<option>
  <option value=001>Accept 3rd Choise<option>
  <option value=110>Accept 1st and 2nd Choise<option>
  <option value=011>Accept 2nd and 3rd Choise<option>
  <option value=101>Accept 1st and 3rd Choise<option>
</select>