为所选的每个选项选择单独的唯一对话框

Question

我正在尝试为每个选定的选项创建一个唯一的确认对话框。 However currently I have it set so that the dialog will only appear if the option selected is less than the previously selected option.除了对话之外，这方面的一切似乎都很好。

我注意到，当我更改为一个选项时，它会获取每个选项的数据模型属性，但有时它不会触发正确的对话框。 （可能需要一直浏览才能看到）。

例如，如果我选择单声道选项 - 警报将显示 ('bus-outputs-reduce-width-to-mono) 这是正确的，但随后对话框将显示“减少为立体声”。

每次变化都不一样，但我不知道为什么会这样。

如果在您按下确认之前选项没有改变，那将是很好的（虽然我知道我将无法使用 .change 功能，但不确定我们还有什么）

有什么想法吗？

HTML

<select class="bus-width btn-light-outline" data-modal="fader-layout-new">
    <option value="No Path" data-modal="bus-outputs-remove-bus">No Path</option>
    <option value="Mono" data-modal="bus-outputs-reduce-width-to-mono" selected="selected" >Mono</option>
    <option value="Surround" data-modal="bus-outputs-reduce-width-to-stereo">Stereo</option>
    <option>5.1 Surround</option>
  </select>

<div class="overlay">

    <a class="cancel">Cancel</a>
    <a class="confirm">Confirm</a>

<div class="hide" id="bus-outputs-remove-bus">Remove Bus?</div>
<div class="hide" id="bus-outputs-reduce-width-to-mono">Reduce to Mono?</div>
<div class="hide" id="bus-outputs-reduce-width-to-stereo">Reduce to Stereo?</div>

</div>

脚本：

var lastIndex = null;

$('select.bus-width').on('change', function () {

    var thisIndex = $(this).find(":selected").index();
    if(thisIndex < lastIndex){
        var myModal = $(':selected').attr("data-modal");
        alert(myModal);
        $('#' + myModal).stop().fadeIn(300);
        $('.overlay').fadeIn(300);
    }

    lastIndex = thisIndex;

});


$('.confirm').click(function() {
    $('.overlay').hide();
});

CSS：

.overlay {
    position:fixed;
    background:rgba(0,0,0,0.5);
    top:0;
    bottom:0;
    right:0;
    left:0;
    text-align:center;
    display:none;
    z-index:99999;
}
.hide {
    display:none;
    position:absolute;
    width:200px;
    top:200px;
    left:50%;
    margin-left:-200px;
    background:red;
}
.cancel {
    background:white;
    position:absolute;
    top:270px;
    left:200px;
    padding:20px;
}
.confirm {
    background:yellow;
    position:absolute;
    top:270px;
    left:270px;
    padding:20px;
}

演示： http://jsfiddle.net/susannalarsen/47a21r25/

Answer 1

请参阅my fiddle。

我添加了下面的代码，因为我认为您在显示正确的模态之前忘记隐藏其他模态。

更新的 JS

    if (thisIndex < lastIndex) {
        var myModal = $(':selected').attr("data-modal");
        alert(myModal);
        $('.hide').hide();
        $('#' + myModal).fadeIn(300);
        $('.overlay').fadeIn(300);
    }