javascript - 根据选择字段上的其他属性值更改属性值

Question

我有这个代码:

<select data-showinsummary="true" data-price="0">
     <option data-price="0" >OPTION 1</option>
     <option data-price="20">OPTION 2</option>
     <option data-price="10">OPTION 3</option>
</select>

当用户选择一个选项(例如选项 3)时，选择标签上的数据价格也会变为 3。

默认情况下，选择标签上的 data-showinsummary 为“true”，data-price 为“0”，我无法更改此设置。

我想做的是检查选择标签上的数据价格是否等于“0”，如果它= 0，那么我想将 data-showinsummary 从“true”更改为“false”

<select data-showinsummary="false" data-price="0">

我想要一个使用纯 javascript 或 jquery 的解决方案。非常感谢你:D

Answer 1

添加onchange函数。在change时调用函数并获取属性值希望这个片段有用并更改选择标签的属性

function updateValue() {
  if ($("#sel option:selected").data('price') == 0) {
    $("#sel").attr('data-showinsummary', false)
  } else {
    $("#sel").attr('data-showinsummary', true)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='sel' data-showinsummary="true" data-price="0" onchange='updateValue()'>
     <option data-price="0" >OPTION 1</option>
     <option data-price="20">OPTION 2</option>
     <option data-price="10">OPTION 3</option>
</select>