javascript - 从所选选项动态更新价格 js 或 jquery

Question

我想动态更新应该显示所选选项价格的跨度的内容。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

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

Answer 1

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

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

您可以通过访问 select 的 options 数组来检索 selectedIndex 处的元素，然后读取它的 数据集.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>