使用具有相同类名的多个 div 获取每个 div 的所有选择值

Question

当有多个具有相同类名的 div 时，有没有办法在具有特定类名的 div 中获取所有选定值的数组？

<div class="mydiv">
<select name="first">
     <option value="1">One</option>
     <option value="2">Two</option>
</select>
<select name="second" ">
     <option value="1">One</option>
     <option value="2">Two</option>
</select> </div>

<div class="mydiv">
<select name="first">
     <option value="1">One</option>
     <option value="2">Two</option>
</select>
<select name="second" ">
     <option value="1">One</option>
     <option value="2">Two</option>
</select> </div>

如果我这样做：$(".mydiv").each(function (){ });

我将通过两个 div 循环（总共两次，因为我有两个类为 mydiv 的 div），这正是我想要的。现在我想为每个选择（第一个和第二个）获取每个 div 中的选定值。

Answer 1

您可以使用map()。

以下假设您希望每个 <div> 都有一个子数组

let res = $('.mydiv').map(function(){
    return [$(this).find('select').map(function(){
        return $(this).val()
    }).get()]
}).get()

console.log(res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv">
  <select name="first">
    <option value="1" selected>One</option>
    <option value="2">Two</option>
  </select>
  <select name="second">
    <option value="1">One</option>
    <option value="2"  selected>Two</option>
  </select>
</div>

<div class="mydiv">
  <select name="first">
    <option value="1">One</option>
    <option value="2"  selected>Two</option>
  </select>
  <select name="second">
    <option value="1">One</option>
    <option value="2"  selected>Two</option>
  </select>
</div>

对于平面数组，只需：

let res = $('.mydiv select').map(function(){
   return $(this).val();
}).get();