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

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出现在单词“费用：”旁边（该值是在附加值之前将其乘以15得出的）。

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

谢谢！ 让我知道是否需要澄清。 感谢帮助。

Answer 1

您的代码几乎可以。 但是，仅当页面完全加载时，才必须初始化Change事件。 尝试这个：

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

Answer 2

将您的脚本标签移动到文档的末尾，它将起作用#ImmortalAsuraKaiser在头部内部找不到#ImmortalAsuraKaiser元素，因此它什么也不做。

要么

使用document.ready函数：

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

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