Question

我有这个jquery：

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>

<script>
$("#ImmortalAsuraKaiser").change(function(){
    var value = $("#ImmortalAsuraKaiser").val();
    $("#AsuraRevenue").append(value * 15);
});
</script>

此下拉菜单：

 <select name="Quantity" id="ImmortalAsuraKaiser">
 <option value="0">0</option>
 <option value="1">1</option> 
 <option value="2">2</option> 
 <option value="3">3</option> 
 <option value="4">4</option> 
 </select>

这个div：

 <div id="AsuraRevenue"></div>

我正在尝试从用户下拉菜单中选择任何值，将其乘以15，然后将其附加到名为“AsuraRevenue”的div。

但是，我的代码无效。我不知道为什么。有什么想法吗？

以下是测试页：http://www.angelfire.com/rpg2/twotaileddemon/index.html

我目前只为LEFTMOST下拉菜单编码。我想这样做，如果我选择一个数字 - 例如3 - 数字45出现在单词“Cost：”旁边（通过在追加它之前将该值乘以15来计算）。

提供一些背景知识：我在广告业工作。我试图从各种输入收集变量，并将其传递给javascript文件，以便在用户进行购买时收集数据。我想显示与每次购买相关的费用，以便当用户从下拉菜单中选择数量时，费用会自动更新。最后，我想把它传递给我的javascript文件！

谢谢！如果需要澄清，请与我们联系。感谢帮助。

Answer 1

你的代码几乎没问题。但是，只有在页面完全加载时才必须初始化Change事件。试试这个：

$(document).ready(function(){
    $("#ImmortalAsuraKaiser").change(function(){
        var value = $("#ImmortalAsuraKaiser").val();
        $("#AsuraRevenue").append(value * 15);
    });
});

Answer 2

将脚本标记移动到文档的末尾并且它将起作用 - 在头部内部，jquery无法找到#ImmortalAsuraKaiser元素，因此它什么都不做。

OR

使用document.ready function：

$(document).ready(function () {
    $("#ImmortalAsuraKaiser").change(function () {
        var value = $("#ImmortalAsuraKaiser").val();
        $("#AsuraRevenue").append(value * 15);
    });
});

请参阅小提琴http://jsfiddle.net/DwS69/1/

尝试根据下拉菜单选项中的用户输入动态填充div

2 个答案: