jQuery獲取多個選擇框的值作為數組

Question

我仍然對使用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.";
?>

Answer 1

您可以使用map()方法獲取多個選擇框的值作為數組。

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

您對多個select使用相同的id 。 我建議您像下面那樣使用類。

<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;
});

Answer 2

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

這將從任何名為gearquan[] select給出選擇值的數組。