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时，select标签上的数据价格也会变为3。

默认情况下，在select标签上，data-showinsummary为“true”，data-price为“0”，我无法更改。

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

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

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

Answer 1

添加onchange函数。更改调用函数并获取属性值希望这个片段有用＆amp;更改选择标记的属性

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>

Answer 2

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect" 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>

和.js

   $(function(){
  $("#mySelect").change(function(e){
      if($('#mySelect').find(":selected").data('price') == 0){
      $(e.target).data('showinsummary' , 'false');  
    }
  });
});

Answer 3

给id＆＃34;价格＆＃34;你的选择元素如下：

<select id="prices" 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>

并将此代码用于javascript部分：

window.onload = function() {
    document.getElementById('prices').addEventListener('change', function() {
        var selected = this.options[this.selectedIndex];

        this.setAttribute('data-price', selected.getAttribute('data-price'));

        if (selected.getAttribute('data-price') == 0) {
            this.setAttribute('data-showinsummary', false);
        } else {
            this.setAttribute('data-showinsummary', true);
        }
    });
}

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

3 个答案: