使用带有多个选择的javascript来更新innerhtml
Use javascript with multiple selects to update innerhtml
我对JavaScript很陌生，但我会边学习边学习。因此，我的问题是关于一个表单中多个动态生成的<select>，并使用它们用价格更新相应的div>span内容。我试过用几种方法运行它，但我不太了解产生的错误，不知道如何修复它。基本上，我列出域名购买价格，由用户决定域名是什么。在下面的例子中，我对域名进行了硬编码，但在我的脚本中，这些域名将由PHP会话信息产生。
https://jsfiddle.net/Lzq3vcb8/
function getPrice(domain) {
var getdom = domain + "_prices";
var putdom = domain + "_displayprice";
var inner = document.getElementById(getdom).value;
document.getElementById(putdom).innerHTML = inner;
}<div class="row">
<div class="col-lg-6">
<select class="form-control" onchange="getPrice('websiteone.info')" id="websiteone.info_prices">
<option data-price="11.29" value="1">1 Year</option>
<option data-price="11.29" value="2">2 Years</option>
<option data-price="11.29" value="3">3 Years</option>
<option data-price="11.29" value="4">4 Years</option>
<option data-price="11.29" value="5">5 Years</option>
<option data-price="11.29" value="6">6 Years</option>
<option data-price="11.29" value="7">7 Years</option>
<option data-price="11.29" value="8">8 Years</option>
<option data-price="11.29" value="9">9 Years</option>
<option data-price="11.29" value="10">10 Years</option>
</select>
</div>
<div class="col-lg-6">
<select class="form-control" onchange="getPrice('websitetwo.info')" id="websitetwo.info_prices">
<option data-price="11.29" value="1">1 Year</option>
<option data-price="11.29" value="2">2 Years</option>
<option data-price="11.29" value="3">3 Years</option>
<option data-price="11.29" value="4">4 Years</option>
<option data-price="11.29" value="5">5 Years</option>
<option data-price="11.29" value="6">6 Years</option>
<option data-price="11.29" value="7">7 Years</option>
<option data-price="11.29" value="8">8 Years</option>
<option data-price="11.29" value="9">9 Years</option>
<option data-price="11.29" value="10">10 Years</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-6 alert alert-warning"><span id="websiteone_displayprice">test1</span>
</div>
<div class="col-lg-6 alert alert-warning"><span id="websitetwo_displayprice">test2</span>
</div>
</div>如果输出元素与javascript上的目标元素不匹配，请检查下面的代码。请使用websiteone.info_displayprice而不是websiteone_displayprice，因为域具有.info并且将在显示价格上进行准备。
<div class="row">
<div class="col-lg-6 alert alert-warning"><span id="websiteone.info_displayprice">test1</span>
</div>
<div class="col-lg-6 alert alert-warning"><span id="websitetwo.info_displayprice">test2</span>
</div>
</div>
function getPrice(domain) {
var getdom = domain + "_prices";
var putdom = domain + "_displayprice";
var inner = document.getElementById(getdom).value;
document.getElementById(putdom).innerHTML = inner;
}<div class="row">
<div class="col-lg-6">
<select class="form-control" onchange="getPrice('websiteone.info')" id="websiteone.info_prices">
<option data-price="11.29" value="1">1 Year</option>
<option data-price="11.29" value="2">2 Years</option>
<option data-price="11.29" value="3">3 Years</option>
<option data-price="11.29" value="4">4 Years</option>
<option data-price="11.29" value="5">5 Years</option>
<option data-price="11.29" value="6">6 Years</option>
<option data-price="11.29" value="7">7 Years</option>
<option data-price="11.29" value="8">8 Years</option>
<option data-price="11.29" value="9">9 Years</option>
<option data-price="11.29" value="10">10 Years</option>
</select>
</div>
<div class="col-lg-6">
<select class="form-control" onchange="getPrice('websitetwo.info')" id="websitetwo.info_prices">
<option data-price="11.29" value="1">1 Year</option>
<option data-price="11.29" value="2">2 Years</option>
<option data-price="11.29" value="3">3 Years</option>
<option data-price="11.29" value="4">4 Years</option>
<option data-price="11.29" value="5">5 Years</option>
<option data-price="11.29" value="6">6 Years</option>
<option data-price="11.29" value="7">7 Years</option>
<option data-price="11.29" value="8">8 Years</option>
<option data-price="11.29" value="9">9 Years</option>
<option data-price="11.29" value="10">10 Years</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-6 alert alert-warning"><span id="websiteone.info_displayprice">test1</span>
</div>
<div class="col-lg-6 alert alert-warning"><span id="websitetwo.info_displayprice">test2</span>
</div>
</div>我会考虑一个jQuery解决方案jsfiddle
HTML:
<div class="row">
<div class="col-lg-6">
<select class="form-control webprice" myUrl="website_one" id="websiteone_select">
<option data-price="11.29" value="1">1 Year</option>
<option data-price="11.29" value="2">2 Years</option>
<option data-price="11.29" value="3">3 Years</option>
<option data-price="11.29" value="4">4 Years</option>
<option data-price="11.29" value="5">5 Years</option>
<option data-price="11.29" value="6">6 Years</option>
<option data-price="11.29" value="7">7 Years</option>
<option data-price="11.29" value="8">8 Years</option>
<option data-price="11.29" value="9">9 Years</option>
<option data-price="11.29" value="10">10 Years</option>
</select>
</div>
<div class="col-lg-6">
<select class="form-control webprice" myUrl="website_two" id="websitetwo_select">
<option data-price="11.29" value="1">1 Year</option>
<option data-price="11.29" value="2">2 Years</option>
<option data-price="11.29" value="3">3 Years</option>
<option data-price="11.29" value="4">4 Years</option>
<option data-price="11.29" value="5">5 Years</option>
<option data-price="11.29" value="6">6 Years</option>
<option data-price="11.29" value="7">7 Years</option>
<option data-price="11.29" value="8">8 Years</option>
<option data-price="11.29" value="9">9 Years</option>
<option data-price="11.29" value="10">10 Years</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-6 alert alert-warning"><span id="display_price">test1</span></div>
</div>
JS:
$(document).on("change", ".webprice", function(){
// get all of the data we need to make calculations
yearPrice = Number($('option:selected', this).attr("data-price"));
years = Number($(this).val());
finalPrice = Math.floor(yearPrice * years * 100)/100;
url = $(this).attr("myUrl");
// display the final price
displayPrices = "The price for " + url + " over " + years + " years is $" + finalPrice;
$("#display_price").html(displayPrices);
});
相关文章：
- Javascript更新孙窗口中的表单元素
- 使用Javascript更新输入框中的文本
- 从angularjs中的javascript更新dom
- 如何在不退出javascript的情况下从javascript更新网页
- 如何使用JavaScript更新JSP页面的一些组件
- 如何使用javascript更新csv文件
- 将字符串转换为数组使用javascript更新一个值并返回一个字符串
- 通过javascript更新Django数据库
- JavaScript:更新<选择>给定月份输入的天数列表
- JavaScript更新功能不起作用
- 使用 node.js 和 javascript 更新 HTML 对象
- 使用 JavaScript 更新 Google 云端硬盘上的文件内容
- 使用 JavaScript 更新日期
- 使用JavaScript更新自定义设置-Salesforce
- JavaScript更新一个2MB的JSON文件
- 使用javascript更新数据库
- 表单提交后用Javascript更新表-在IE&边
- 使用javascript更新解析中的行
- 如何使用JavaScript更新iframe的信息
- 使用JavaScript更新网页，无需重新加载网页
