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

【问题标题】：Trying to dynamically populate a div based on user input from a drop down menu selection尝试根据下拉菜单选择中的用户输入动态填充 div
【发布时间】：2014-06-07 02:36:40
【问题描述】：

我有这个 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 文件！

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

【问题讨论】：

标签： javascript jquery drop-down-menu append

【解决方案1】：

您的代码几乎没问题。但是，您必须仅在页面完全加载时才启动 Change 事件。试试这个：

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

【讨论】：

【解决方案2】：

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

或

使用 document.ready 函数：

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

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

【讨论】：

或者把函数放在$document.ready(function() { ... }中
哦，嘿！这行得通！谢谢！！！很高兴知道我的代码没有任何问题，我只需要使用 document.ready :)。