2015-04-04 53 views
3

假設我有5個選擇,但只能從其中3個選項中選擇。我需要完成以下工作:1.計算總價格,2.動態傳遞設置變量(最終將傳遞給PHP的json),等於所選選項的名稱attr。計算用戶從多重選擇中選擇多少個選項

我遇到的問題是,我在每個選項上使用value =「1」。然後定義每次通過靜態分配變量和另外一個選項來選擇另一個選項時更新的價格。在我做的每個選擇有很多選項可供選擇。

我卡在哪裏: 要麼我要使用名稱屬性和傳遞5個變量(使用選項:選擇)或有一種方法來實現這一點,所以我的數據庫只需要3列來存儲數據庫而不是5.

我希望在頁面上的腳本,而不是在PHP中完成此操作。你能動態地做到這一點,只發送超過3個變量的JSON傳遞給PHP或這是更容易和更快發送超過5?是的,我非常新的JavaScript和jQuery :)

<form id = "testform" name = "testform" method="POST" action="test.php"> 
<select class = "choose" id="choice1"> 
    <option value="0" selected=""></option> 
    <option value="1"> Choice 1.a</option> 
</select> 

<select class = "choose" id="choice2"> 
    <option value="0" selected=""></option> 
    <option value="1"> Choice 1.b</option> 
</select> 

<select class = "choose" id="choice3"> 
    <option value="0" selected=""></option> 
    <option value="1"> Choice 1.c</option> 
</select> 

<select class = "choose" id="choice4"> 
    <option value="0" selected=""></option> 
    <option value="1"> Choice 1.d</option> 
</select> 

<select class = "choose" id="choice5"> 
    <option value="0" selected=""></option> 
    <option value="1"> Choice 1.b</option> 
</select> 

<label><h4>Total:$</h4> <input style="" type="number" class="num" name="amount" value="0.00" readonly="readonly" /></label> 

<script type="text/javascript"> 
$('select').change(function(){ 
    var form = this.form; 
     var sum = 0; 
     var price;  

    $('select :selected').each(function() { 
     sum += Number($(this).val()); 
    }); 

if (sum > 3) { 
     alert("You can only choose 3 classes"); 
     $('select.choose').each(function() { 
      $('.choose').val(0); 
     }); 
    } 
     if (sum == 1){ 
    price = 80; 
    } 
else if (sum == 2) { 
    price = 130; 
} 
else if (sum == 3) { 
    price = 180; 
} 

$(".num").val(price); 

form.elements['total'] = price; 

}); 
+0

所以,檢查有多少選擇具有比'0'其他的東西價值,確保其不超過3個,然後讓這些選擇的名字嗎? – adeneo 2015-04-04 04:13:01

+1

http://jsfiddle.net/6ajekmx9/ – adeneo 2015-04-04 04:21:26

+0

是的!我繼續前進,併爲每個初始選項分配一個名稱=「NULL」,並將js更改爲全部取消。這解決了我能夠計算總數的問題,併爲PHP post變量提供了正確的信息給JSON。 你的解決方案要好得多...更短,更清潔。儘管我仍然在學習。 – tktenn 2015-04-04 16:54:52

回答

0

檢查許多選擇如何具有除0以外的值,確保它不超過3個,然後讓這些選擇的名稱

$('select').on('change', function(){ 
    var selected = $('select').filter(function() { 
      return parseInt(this.value, 10) !== 0; 
     }), 
     sum  = selected.length, 
     price = [80, 130, 180][sum - 1], 
     names = selected.map(function() { 
      return this.id; // selects don't seem to have names ? 
     }).get(); 

    if (sum > 3) { 
     alert("You can only choose 3 classes"); 
    } else { 
     $('.num').val(price); 
    } 

    console.log(names, sum) 

}); 

FIDDLE