Django实现下拉框切换选项时同步更新对应商品价格的咨询

你的代码存在两处错误导致功能不生效：

1. 事件绑定对象错误：下拉选的change事件需要绑定在<select>标签上，你当前绑定到了<option>对应的类上，无法触发变更监听。
2. 内容赋值方法错误：#id_price是<span>普通标签，不是输入类表单控件，不能用.val()赋值，需要使用.text()设置显示文本。

另外建议你把自定义的price属性改为HTML5规范的data-*格式（即data-price），属性值补充引号，避免属性识别异常。

修正后完整代码 #

HTML部分 #

<select class="tranactionID" style="width: 250px;">
    {% for val in productID.list %}
    <option data-price="{{val.Price}}" class="price_value" >{{val.AUID}} - {{val.Description}} - {{val.Price}}</option>
    {% endfor %}
</select>

<div class="pricing">
    <p class="price"><span class="mr-2 price-dc">Rs. </span><span class="price-sale" id='id_price'>Rs. </span></p>
</div>

JS部分 #

<script>
// 监听下拉选变更事件
$(document).on("change", '.tranactionID', function (event) {
    event.preventDefault();
    // 读取选中项的价格属性
    let selectedPrice = $(this).find(":selected").data("price");
    // 更新价格显示区域内容
    $('#id_price').text('Rs. ' + selectedPrice);
});

// 可选：页面加载后自动初始化默认选中项的价格
$(document).ready(function() {
    let initPrice = $('.tranactionID').find(":selected").data("price");
    $('#id_price').text('Rs. ' + initPrice);
})
</script>

内容的提问来源于stack exchange，提问作者Muhammad Usama Naveed