根據下拉菜單中的選擇更改文本

Question

我已經用各種價格初始化了一個數組。 價格與給定尺寸的商品#pricing和120相關。我編寫了一個腳本，根據下拉菜單的值更改#pricing的值。

JS

var prices = {
    '10' : '5',
    '30' : '10',
    '120' : '15'
};

function updPrix() {
    var key = $("#size").val();
    $("#pricing").text(prices[key]);
}

的HTML

<strong>Price: <span id="pricing"></span></strong> <br/><br/>
<select id="size" name="size" required="required" onchange="updPrix();">
    <option selected="selected" value="" disabled="disabled">Size</option>
    <option value="10">10mL</option>
    <option value="30">30mL</option>
    <option value="120">120mL</option>
</select>

不幸的是，它似乎無能為力。 我在這里想念什么？ 在我看來，這是正確的。

Answer 1

除非您在window.onload = function(){}或$(document).ready(function(){});運行上面的JS，除非您在另一個函數中運行了JS，否則您應該擁有的一切都會$(document).ready(function(){}); 在這種情況下， updPrix()不再是全局的，無法在您的內聯事件處理程序中運行。

在這種情況下，請刪除onchange屬性，並在您的函數中對其進行說明：

function updPrix() {
    $("#size").on("change", function(){
        var key = $(this).val();            
        $("#pricing").text(prices[key]);
    });
}

Answer 2

您沒有獲得所選的那些值。請嘗試以下操作：

var key = $("#size :selected").val();