从多个选择表单中收集当前变量

Question

我想从一个函数中收集来自4个不同选择表单的所有当前选项。然后，我将根据选择输出价格。

我已经可以输出一些UI的单独选项，但我无法弄清楚如何在一个函数中获取所有变量。

 <div class="col-md-6 center"> 
      <h4>Title</h4> 
      <img name="division" src="/img/div/bronze_1.png" alt="Bronze"> 
      <select class="form-control" id="current"> 
       <option value="0" selected>Bronze</option> 
       <option value="1">Silver</option> 
       <option value="2">Gold</option> 
       <option value="3">Platinum</option> 
       <option value="4">Diamond</option> 
      </select> 
      <select class="form-control m10" id="currentdiv"> 
       <option value="1">Division I</option> 
       <option value="2">Division II</option> 
       <option value="3">Division III</option> 
       <option value="4">Division IV</option> 
       <option value="5" selected>Division V</option> 
      </select> 
     </div> 
     <div class="col-md-6 text-md-center text-sm-center"> 
      <h4>Desired Rank</h4> 
      <img name="desired-division" src="/img/div/bronze_1.png" alt="Bronze"> 
      <select class="form-control" id="desired"> 
       <option value="0" selected>Bronze</option> 
       <option value="1">Silver</option> 
       <option value="2">Gold</option> 
       <option value="3">Platinum</option> 
       <option value="4">Diamond</option> 
      </select> 
      <select class="form-control m10" id="desireddiv"> 
       <option value="1">Division I</option> 
       <option value="2">Division II</option> 
       <option value="3">Division III</option> 
       <option value="4" selected>Division IV</option> 
       <option value="5">Division V</option> 
      </select> 
     </div> 
    </div> 
</div> 
<div class="col-md-4 text-md-center text-sm-center" id="order"> 
    <h4>Your Order</h4> 
    <div class="alert-info"> 
     <p class="lead">From <span id="currentspan">Bronze</span> <span id="currentdivspan">V</span> to <span id="desiredspan">Bronze</span> <span id="desireddivspan">IV</span></p> 
    </div> 
    <div class="alert-success"> 
    <p>Price: <span id="price">8</span>€ ($<span class="priceusd">8.92</span>)</p> 
    </div><img src="/img/payment-badges.png" alt="payment badges"> 
    <a href="/order.php" class="btn btn-lg btn-primary m25"><i class="fa fa-paypal" aria-hidden="true"></i> Order Now</a> 
</div> 

$("#current").change(function(){ 
    var val4 = parseInt($('#current').val()); 
    var pictureList = [ 
     "/img/div/bronze_1.png", 
     "/img/div/silver_1.png", 
     "/img/div/gold_1.png", 
     "/img/div/platinum_1.png", 
     "/img/div/diamond_1.png" ]; 
     $("img[name=division]").attr("src",pictureList[val4]); 
    var text; 
    switch (val4) { 
     case 0: 
      text = "Bronze"; 
      break; 
     case 1: 
      text = "Silver"; 
      break; 
     case 2: 
      text = "Gold"; 
      break; 
     case 3: 
      text = "Platinum"; 
      break; 
     case 4: 
      text = "Diamond"; 
      break; 
    } 
    $("#currentspan").html(text); 
}); 

$("#currentdiv").change(function(){ 
    var cdiv = parseInt($('#currentdiv').val()); 
    var cdivtext; 
    switch (cdiv) { 
     case 1: 
      cdivtext = "I"; 
      break; 
     case 2: 
      cdivtext = "II"; 
      break; 
     case 3: 
      cdivtext = "III"; 
      break; 
     case 4: 
      cdivtext = "IV"; 
      break; 
     case 5: 
      cdivtext = "V"; 
      break; 
    } 
    $("#currentdivspan").html(cdivtext) 
}); 

Answer 1

为了让你做的所有选择的选项如下：

var selected_options = []; 
$('select.form-control').change(function(){ 
    selected_options = $('select.form-control').find('option:selected').map(function(){return $(this).val();}); 
});