My goal is to design a unique confirmation dialog that will display for each option selected. Currently, I have it set up so that the dialog will only appear if the selected option is lower than the previously selected one. Everything seems to be working fine in that aspect except for the dialogs.
I have observed that when I change to a different option, the system is reading the data-model attribute for each option but sometimes it fails to trigger the correct dialog (you may need to keep switching through to notice it).
For instance, if I choose the Mono option, the alert correctly shows ('bus-outputs-reduce-width-to-mono), but then the dialog displays "reduce to Stereo". The inconsistencies vary each time, and I can't seem to figure out the reason behind this behavior.
It would also be beneficial if the option doesn't change until the user has pressed confirm (although I understand that I wouldn't be able to utilize the .change function, I'm unsure of what else to use).
Any suggestions?
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>
SCRIPT:
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;
}