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。

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

您可以通过访问options的{{1}}数组以在select处检索元素，然后将其读取为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;
});

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

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

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

Answer 2

您可以使用jQuery的change函数来监视下拉菜单的更改。在此函数中，编写代码以找到所选的选项并将其值设置为price_materials跨度。您将在下面看到类似的内容。在操作here中查看它。

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

从所选选项动态更新价格js或jQuery

2 个答案: