jquery select 如果选项从特定值更改为另一个特定值，则触发操作

Question

在此代码中。我有 'No path' 选项值在被选中时触发某些东西。我有一个无路径、单声道、立体声、环绕声的层次结构。环绕是最高的选项，没有路径是最低的。

我想做的只是让 div class 在选项更高时触发，例如。环绕。

所以如果选项打开 "surround" 并且我更改为 "Stereo" 那么它将触发事件。

如果我从 "Surround" 到 "Mono" 也会触发一个事件，因为我从高到低。

但是...如果我从 "Mono" 转到 "Stereo"（或 "Mono" 转到“环绕声”），这不会触发事件，因为它会转到更高的选项。

我曾尝试手动执行此操作，但代码变得混乱且非常长，根本无法正常工作。

差不多

if - 更改为不太重要（或低于）先前选择的选项的选项 - 触发事件

else - 不触发事件。

我搜索了很多网站并试图将其拼凑起来，但只进行了一半就卡住了。

关于如何做得更好有什么想法吗？

代码如下：

脚本

var hello = ('select option:selected');
alert(hello);

$('select').on('change', function () {
    var valueSelected = this.value;

    alert(valueSelected);
    if($(this).val() === 'No Path'){
         $('.do-something').addClass('triggered');   
  }
});

HTML

  <select class="bus-width btn-light-outline">
    <option value="No Path">No Path</option>
    <option value="Mono">Mono</option>
    <option value="Stereo">Stereo</option>
    <option value="Surround">5.1 Surround</option>
  </select>

<div class="do-something">This needs to be triggered</div>

CSS

.do-something {
    position:absolute;
    bottom:70px;
    padding:30px;
    background:white;
    border:1px solid black;
}
.triggered {
  background:green;  
}

https://jsfiddle.net/susannalarsen/dh5ma2j1/

Answer 1

这应该有效。对选择进行排名并比较排名。

var ranking = ['No Path', 'Mono', 'Stereo', 'Surround']
var current_rank = 0

$('select').on('change', function () {

    var valueSelected = this.value;
    if(ranking.indexOf(valueSelected) < current_rank){
         $('.do-something').addClass('triggered'); 
    } else {
         $('.do-something').removeClass('triggered');    
    }
    current_rank = ranking.indexOf(valueSelected)
});

JSFiddle

Answer 2

这是一个使用index()

的解决方案

基本上，索引是元素在文档中的位置，因此第一个选项的索引=0，第二个选项的索引=1，依此类推。我们获取当前选择的选项的索引，并将其与上次选择的索引进行比较。

var lastIndex = null;

$('select').on('change', function () {

    var thisIndex = $(this).find(":selected").index();

    if(thisIndex < lastIndex){
        $('.do-something').addClass('triggered');   
    } else {
        $('.do-something').removeClass('triggered');   
    }

    lastIndex = thisIndex;

});

演示：https://jsfiddle.net/alan0xd7/dh5ma2j1/5/

jquery select 如果选项从特定值更改为另一个特定值，则触发操作

jquery select trigger action if option is changed from specific value to another specific value

jquery

html

select

html-select