从所选选项动态更新price 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中的元素，然后读取它的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>

Answer 2

您可以使用jQuery的change函数来监视下拉列表的变化。在此函数中，编写代码以查找所选选项，并将值设置为price_materials跨度。你会看到下面这样的东西。请在此处查看它的实际操作。

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