jQuery的變化形式按鈕值在PHP

Question

我有2名的下拉列表中，「類型」和「級別」形式，如

Type 
----- 
Hotel 
Restaurant 
Casino 

Level 
----- 
1 
2 
3 

和一個提交按鈕，顯示的價格基礎上在任何被選擇的選項落下。價格是通過一些基本的數學運算來計算的。

我該如何使用jQuery來做到這一點？

它使用onchange（）什麼的？

Answer 1

$("#button_id_here").val("$your_amount_here"); 

如果你想讓它自動更新，它在選擇綁定到change事件/下拉菜單

$("#select_id_here").change(function(){ 
    //"basic maths" 
    $("#button_id_here").val("$your_amount_here"); 
}); 

你想要更多的幫助，我們需要看到的代碼。

Answer 2

HTML：

<form> 
    <fieldset> 
     <p> 
      <label for="selectType">Type:</label> 
      <select id="selectType" name="type"> 
       <option value="Hotel" data-cost="40">Hotel</option> 
       <option value="Restaurant" data-cost="80">Restaurant</option> 
       <option value="Casino" data-cost="35">Casino</option> 
      </select> 
     </p> 

     <p> 
      <label for="selectLevel">Level:</label> 
      <select id="selectLevel" name="level"> 
       <option value="1" data-cost="0">1</option> 
       <option value="2" data-cost="15">2</option> 
       <option value="3" data-cost="30">3</option> 
      </select> 
     </p> 

     <p> 
      Total Cost: $<span id="cost">0</span> 
     </p> 

     <p><input type="submit" value="Go!"></p> 
    </fieldset> 
</form> 

的jQuery：

$(function() { 
    $("#selectType, #selectLevel").change(function() { 
     var type = $("#selectType"), 
      level = $("#selectLevel"), 
      cost = $("#cost"), 
      typeCost = type.find(":selected").data('cost'), 
      levelCost = level.find(":selected").data('cost'), 
      total = typeCost + levelCost; 

     cost.html(total); 
    }).change(); // invoke the .change() trigger 
}); 

See it in action here

你可能想也設置類似 「數據倍增器」 的層面，而... 2級可有1.5倍乘數，而3級可能有2倍乘數。您也必須相應地調整jQuery（例如，total = typeCost * levelCostMultiplier）。

Answer 3

您可以通過jQuery的change（）函數檢查選擇列表是否已更改。

這裏有一個辦法做到這一點：

HTML：

Type 
<select name="type" id="type"> 
    <option value="hotel" selected>Hotel</option> 
    <option value="restaurant">Restaurant</option> 
    <option value="casino">Casino</option> 
</select>Level 
<select name="level" id="level"> 
    <option value="1" selected>1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<div id="result"></div> 

的jQuery：

var result = 1; 
$("#type").change(function() { 
    var val = $(this).val(); 
    $("#result").html("Type is " + val + ", level is " + $("#level").val()); 
}); 

$("#level").change(function() { 
    var val = $(this).val(); 

    // Some basic math 
    result = parseInt(val) * 5; 

    $("#result").html("Type is " + $("#type").val() + ", level is " + val + ", result: " + result); 
}); 

及相關的jsfiddle： http://jsfiddle.net/y2s4v/1/