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

これはという名前のselectから選択された値の配列を与えます。