[英]Count how many options a user chooses from multple selects
假設我在html表單中有5個選項但你只能選擇其中3個選項。 我需要完成以下任務:1。計算總價格,2。動態傳遞設置變量(最終將傳遞給PHP的json)等於所選選項的名稱attr。
我遇到的問題是我在每個選項上使用value =“1”。 然后通過靜態地使用if else分配變量來定義每次選擇另一個選項時更新的價格。 在我正在做的每個選擇有很多選項可供選擇。
我被困住的地方:要么我要使用name屬性並傳遞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以外的值,確保它不超過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)
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.