Tengo un tipo de entrada Seleccionar con 3 opciones y quiero mostrar una ventana de Alerta cuando se selecciona cualquier opción.

Esta alerta tiene que poner en espera la ejecución de la opción seleccionada y dar una advertencia como: "Los cambios no guardados se perderán. ¿Está seguro de que desea continuar?", entonces quiero la opción de 'Cancelar' la ejecución o presionar 'Aceptar' y ejecutar.

¿Cómo puedo agregar una opción Cancelar dentro de la alerta para que no ejecute la opción seleccionada y permanezca en la opción seleccionada anteriormente?

Ver mi código a continuación y en el JSFiddle

HTML:

 <p> Choose your formation: </p> <select id="formation" name="formation" onchange="myFunction(formation)"> <option value="1"> 1-1-2 </option> <option value="2"> 1-2-1 </option> <option value="3"> 2-1-1 </option> </select> <p> You chose the following formation: <spam id="demo"> X</spam>. </p>

JavaScript:

 function myFunction(formation) { alert("Unsaved changes will be lost. Are you sure you want to continue?") if(document.getElementById('formation').value == "1") { document.getElementById("demo").innerHTML = "1-1-2"; } if(document.getElementById('formation').value == "2") { document.getElementById("demo").innerHTML = "1-2-1"; } if(document.getElementById('formation').value == "3") { document.getElementById("demo").innerHTML = "2-1-1"; } }