从所选选项动态更新价格 js 或 jquery答案

【问题标题】：Dynamically update price js or jquery from selected option从所选选项动态更新价格 js 或 jquery
【发布时间】：2018-07-27 19:22:41
【问题描述】：

我想动态更新跨度的内容，以显示所选选项的价格。 PS：我正在使用 Django + Python 来生成选项

这是我的代码：

<select class="form-control" id="materials">
    {% for material2 in materials %}
        <option value="{{ material2.name }}" data-price="{{ material2.price }}">{{ material2.name }} + <span id="material_price">{{ material2.price }}€</span></option>
    {% endfor %}
</select>
<span id="price_material"></span>

这是我尝试过的：

var material = document.getElementById("materials")
material.onchange = function() {
    var txt = document.getElementById("#material_price").value;
    document.getElementById("price_material").innerText = txt

如果你知道答案，请帮助我。

【问题讨论】：

请展示您自己解决此问题的尝试。请记住，SO 在这里帮助您调试代码，而不是为您编写代码
刚刚更新了我的代码！我的错。
这不是已经解决了吗？ stackoverflow.com/questions/51561897/…
旁注，document.getElementById("#material_price") 使用 getElementById 时不要包含 #。这可能是您的问题。

标签： javascript jquery html django dynamic

【解决方案1】：

首先请注意，option 中不能有元素，因此需要删除 span。

您当前的逻辑也是从select 元素中读取value。相反，您需要从选定的option 元素中读取data-price。

您可以通过访问select 的options 数组来检索selectedIndex 处的元素，然后读取它是dataset.price。试试这个：

var priceMaterial = document.getElementById("price_material");

document.getElementById("materials").addEventListener('change', function() {
  var selected = this.options[this.selectedIndex];
  var txt = selected.dataset.price;
  priceMaterial.innerText = txt;
});

<select class="form-control" id="materials">
  <option value="name2" data-price="1.99">name2 + 1.99€</option>
  <option value="name3" data-price="10.99">name3 + 10.99€</option>
  <option value="name4" data-price="15.99">name4 + 15.99€</option>
</select>
<span id="price_material"></span>

或者，您可以在 jQuery 中执行此操作：

var $priceMaterial = $("#price_material");

$("#materials").on('change', function() {
  var txt = $(this).find('option:selected').data('price');
  $priceMaterial.text(txt);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="materials">
  <option value="name2" data-price="1.99">name2 + 1.99€</option>
  <option value="name3" data-price="10.99">name3 + 10.99€</option>
  <option value="name4" data-price="15.99">name4 + 15.99€</option>
</select>
<span id="price_material"></span>

【讨论】：

没问题，很高兴为您提供帮助

【解决方案2】：

您可以使用 jQuery 的 change 函数来观察下拉菜单的变化。在此函数中，编写代码以查找所选选项并将值设置为 price_materials 范围。你会看到类似下面的东西。亲身体验here。

$(document).ready(function() {
    $('#materials').change(function(){
    var value = $('#materials').find(":selected").attr('data-price');
        $('#price_material').text(value);
    });
});

【讨论】：