jQuery 在表单中检索和分组每个选择值答案

【问题标题】：jQuery retrieve and group each select values in a formjQuery 在表单中检索和分组每个选择值
【发布时间】：2016-03-05 10:20:01
【问题描述】：

这是我的 HTML：

<form id="myForm">
 <div>
    <h3>Goupe 1</h3>
    <div class="form-group">
        <select class="form-control" name="options[1][type]">
            <option value="vector"></option>
            <option value="image"></option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control multiple" name="options[1][size][]">
            <option value="800x600"></option>
            <option value="1024x768"></option>
            <option value="11280x1024"></option>
        </select>
    </div>
 </div>        

 <div class="validated">
    <h3>Goupe 2</h3>
    <div class="form-group">
        <select class="form-control" name="options[2][type]">
            <option value="vector">Vector</option>
            <option value="image">Image</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control multiple" name="options[2][size][]">
            <option value="800x600">800x600</option>
            <option value="1024x768">1024x768</option>
            <option value="11280x1024">1280x1024</option>
        </select>
    </div>
 </div>
    ....
</form>

在 jQuery 中，我需要为每个具有 validated 类的组检索每个选择值，并将其存储在 Javascript 数组中。

组数可以不同
options[n][type] 有单选（例如：向量）
options[n][size][] 有多种选择（例如：800x600、11280x1024）

我很迷茫。

【问题讨论】：

您希望将值放入什么格式？一个数组，对象，完全是别的什么东西？另请注意，您的 HTML 在每个次要 option 元素上都有语法错误。
javascript数组，是的，谢谢，我修好了，粗心的错误。

标签： jquery arrays select each

【解决方案1】：

根据你的操作

在 jquery 中，我需要检索每个组的每个选择值一个经过验证的类并将其存储在 javascript 数组中。

你可以使用jquery.map()

var arr = $(".validated").find("select.form-control").map(function () {
    return $(this).val();
}).get();
console.log(arr)//prints ["vector", "800x600"]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <div>
    <h3>Goupe 1</h3>
    <div class="form-group">
      <select class="form-control" name="options[1][type]">
        <option value="vector"></option>
        <option value="image"></option>
      </select>
    </div>
    <div class="form-group">
      <select class="form-control multiple" name="options[1][size][]">
        <option value="800x600"></option>
        <option value="1024x768"></option>
        <option value="11280x1024"></option>
      </select>
    </div>
  </div>

  <div class="validated">
    <h3>Goupe 2</h3>
    <div class="form-group">
      <select class="form-control" name="options[2][type]">
        <option value="vector">Vector</option>
        <option value="image">Image</option>
      </select>
    </div>
    <div class="form-group">
      <select class="form-control multiple" name="options[2][size][]">
        <option value="800x600">800x600</option>
        <option value="1024x768">1024x768</option>
        <option value="11280x1024">1280x1024</option>
      </select>
    </div>
  </div>
</form>

当然，这只是为了演示。您可以在提交表单或任何其他您希望的操作之前使用它。

或者，您可以返回一个包含对象的数组，以包含所选值和选择元素名称，例如：

var arr = $(".validated").find("select.form-control").map(function () {
    return {
        name: $(this).attr("name"),
        value: $(this).val()
    }
}).get();
console.log(arr);//prints out an array with two objects

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
    <div>
         <h3>Goupe 1</h3>

        <div class="form-group">
            <select class="form-control" name="options[1][type]">
                <option value="vector"></option>
                <option value="image"></option>
            </select>
        </div>
        <div class="form-group">
            <select class="form-control multiple" name="options[1][size][]">
                <option value="800x600"></option>
                <option value="1024x768"></option>
                <option value="11280x1024"></option>
            </select>
        </div>
    </div>
    <div class="validated">
         <h3>Goupe 2</h3>

        <div class="form-group">
            <select class="form-control" name="options[2][type]">
                <option value="vector">Vector</option>
                <option value="image">Image</option>
            </select>
        </div>
        <div class="form-group">
            <select class="form-control multiple" name="options[2][size][]">
                <option value="800x600">800x600</option>
                <option value="1024x768">1024x768</option>
                <option value="11280x1024">1280x1024</option>
            </select>
        </div>
    </div>
</form>

参考文献

.find()

.get()

【讨论】：

【解决方案2】：

你可以看看下面的代码。它使用一个虚拟 HTML form 来保存所有具有 validated 类的组，然后我们只是序列化该表单。

$(document).ready(function(){
  
  var dummyForm = $("<form></form>");
  $(".validated").each(function(){
    dummyForm.append($(this).html());
  });  
    
  $("div.output").html(  JSON.stringify(dummyForm.serializeArray()));
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myForm">
 <div>
    <h3>Goupe 1</h3>
    <div class="form-group">
        <select class="form-control" name="options[1][type]">
            <option value="vector">vector</option>
            <option value="image">image</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control multiple" name="options[1][size][]">
            <option value="800x600">800x600</option>
            <option value="1024x768">1024x768</option>
            <option value="11280x1024">11280x1024</option>
        </select>
    </div>
 </div>        

 <div class="validated">
    <h3>Goupe 2</h3>
    <div class="form-group">
        <select class="form-control" name="options[2][type]">
            <option value="vector">Vector</option>
            <option value="image">Image</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control multiple" name="options[2][size][]">
            <option value="800x600">800x600</option>
            <option value="1024x768">1024x768</option>
            <option value="11280x1024">1280x1024</option>
        </select>
    </div>
 </div>

  
  <div class="validated">
    <h3>Goupe 2</h3>
    <div class="form-group">
        <select class="form-control" name="options[3][type]">
            <option value="vector1">Vector1</option>
            <option value="image">Image</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control multiple" name="options[3][size][]">
            <option value="800x6001">800x6001</option>
            <option value="1024x768">1024x768</option>
            <option value="11280x1024">1280x1024</option>
        </select>
    </div>
 </div>
  
</form>
<div class="output">
</div>

【讨论】：