使用包含多个选项的javascript来更新innerhtml

时间：2016-07-18 03:07:05

标签： javascript jquery html

我是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>

2 个答案:

答案 0 :(得分：1)

您的输出元素与您在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>

答案 1 :(得分：-1)

我考虑使用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);

});
相关问题
最新问题