jquery获取多个选择框的值作为数组 - jquery get values of multiple select boxes as array

我对使用jquery还很陌生，也曾尝试过在谷歌上搜索我的问题，但无法完全解决。

我的页面上有多个选择框，每个框都命名为gearquan[]

如何让jquery获得每个选择框的选定值，并将其作为序列化数组传递？

这是我的html表单：

    <script src="options.js"></script>
    Do you want to add the CDW?<br>
    <input type="radio" name="cdwq" id="cdwq" value="yes" checked>Yes<br>
    <input type="radio" name="cdwq" id="cdwq" value="no">No<br>
    <input type="hidden" name="cdw" id="cdw" value="20">
    <h2>Equipment</h2>If you need more than one of an item, select your      quantity below:<br><table width="700px" cellspacing="0">
    <tr style="border-bottom: 1px solid #000;">
        <td style="border-bottom: 1px solid #000;">
        <select name="gearquan[]" id=gearquan[]">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
    </td>
    <td style="border-bottom: 1px solid #000;">HCK</td>
    <td width="40%" style="border-bottom: 1px solid #000;">Includes the Sleep Kits for up to 6 people, Kitchen Kit, Outdoor Kit, and Touring Kits.</td>
    <td style="border-bottom: 1px solid #000; text-align: right;">$250 each</td>
</tr>
<tr style="border-bottom: 1px solid #000;">
    <td style="border-bottom: 1px solid #000;">
    <select name="gearquan[]" id=gearquan[]">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>
    </td><td style="border-bottom: 1px solid #000;">Gen</td><td width="40%" style="border-bottom: 1px solid #000;">Runs everything 2000 watt does plus an air conditioner in our larger campers</td><td style="border-bottom: 1px solid #000; text-align: right;">$50 Per Day.<br>$250 Per Week</td></tr></table>
    <br>
    Choose campground:
    <select name="park" id="park" style="width: 150px;">
    <option value="NONE"></option>
    <option value="fb">Fishing Bridge</option>
    <option value="bb">Bridge Bay</option>
    <option value="wt">West Thumb</option>
    <option value="gv">Grant Village</option>
    <option value="ma">Madison</option>
    <option value="no">Norris</option>
    <option value="ca">Canyon</option>
    <option value="to">Tower</option>
    <option value="ma">Mammoth</option>
    </select><br>
    <br>
    And Select Your Delivery Type: <select name="deliv" id="deliv"     style="width: 175px;"><option value="none">I will be towing it myself.</option>
    <option value="both">Deliver and Pickup</option>
    <option value="deliver">Deliver Only</option>
    <option value="pickup">Pickup Only</option>
    <option value="setup">Setup Only</option></select>
    </div>
    <br><br>
    <input type="submit" id="submit" value="Continue" style="background-color: #93161b;  border: 1px solid #93161b;  border-radius: 2px; box-shadow: 0 1px 1px 0 #000; color: #fff; width: 125px; margin: 20px 0; font-size: 1.5em; padding: 10px 0;"></form>

我的script.js文件：

$(document).ready(function(){
    $("#submit").click(function(){
            var values = new Array();
            values = $("#gearquan").serialize();
            //items = values.serialize;
            var cdw = document.getElementById("cdw").value;
            var cdwq = document.getElementById("cdwq").value;
            var toadd = document.getElementById("toadd").value;
            var park = document.getElementById("park").value;
            var deliv = document.getElementById("deliv").value;
            var dataString = 'gearquan=' +values+ '&cdw='+ cdw +'&cdwq='+ cdwq +'&toadd='+ toadd +'&park='+ park +'&deliv='+ deliv;
        $.ajax({
            type: "POST",
            url: "optionssub.php",
            data: dataString,
            cache: false,
            success: function(result){
            //alert(result);
            window.location.assign("confirm.php")
            }
        });
        //}
        return false;
    });
});

脚本将值传递给php文件：

<?php
    session_start();
    $_SESSION["gearquan"]=$_POST["gearquan"];
    $_SESSION["cdw"]=$_POST["cdw"];
    $_SESSION["cdwq"]=$_POST["cdwq"];
    $_SESSION["toadd"]=$_POST["toadd"];
    $_SESSION["park"]=$_POST["park"];
    $_SESSION["deliv"]=$_POST["deliv"];
    echo "Success.";
?>

您可以使用map()方法获得多个选择框作为数组的值。

var values = $('select').map(function() {
    return this.value;
});

您对多个select使用相同的id。我建议你们像下面这样使用class。

<select class="gearquan">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</select>

然后使用以下js。

var values = $('.gearquan').map(function() {
    return this.value;
});

var selectedValues = $('select[name="gearquan[]"] option:selected');

这将给出一个从任何名为gearquan[]的select中选择的值的数组。