Comment afficher les alertes toast pour plusieurs choix dans une liste déroulante?

Question

J'ai un menu déroulant appelé "FavoriteFoods". Dans cette liste déroulante, j'ai 4 choix, "Pizza", "Sushi", "Burgers" et "Biryani". Dans la liste déroulante "Favoris", lorsque je sélectionne l'un des choix, je veux un pop-up toast pour alerter "Excellent choix!"

Comment puis-je y parvenir?

<div class="col-md-3"> 
     <div class="form-group"> 
       <label>Request Type</label> 
       <select name="FavoriteFoods" class="form-control select2" style="width: 100%;" required> 
        <option value="" disabled selected>Select your favorite food</option> 
        <option value="Pizza">Pizza</option> 
        <option value="Sushi">Sushi</option> 
        <option value="Burgers">Burgers</option> 
        <option value="Biryani">Biryani</option> 
       </select> 
     </div><!-- /.form-group --> 
    </div><!-- /.col --> 

Answer 1

Vous pouvez simplement lier Evénement onchange pour les messages select et toast. S'il vous plaît trouver par exemple travailler comme ci-dessous

Jsfiddle Example

$(function() { 
    $(".select2").change(function(){ 
    toastr.success("Great Choice"); 
}); 

}); 

Answer 2

En supposant que vous utilisez JQuery, vous pouvez le faire comme ça

$(".select2").change(function(){ 
    alert(this.val()); // you can use your custom alert options like toastr 
}); 

Answer 3

Utilisez jquery pour sélectionner la valeur de la sélectionner box.Then comparer et montrer l'exemple alert.A démo:

$("select[name*='FavoriteFoods']").change(function(event){ 
 
    console.log($(this).val()); 
 

 
    if($(this).val() == 'Pizza' || $(this).val() == 'Sushi'){ 
 
     alert("Great choice ") 
 
    } else{ 
 
     alert("Selected item is"+ $(this).val()) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-3"> 
 
     <div class="form-group"> 
 
       <label>Request Type</label> 
 
       <select name="FavoriteFoods" class="form-control select2" style="width: 100%;" required> 
 
        <option value="" disabled selected>Select your favorite food</option> 
 
        <option value="Pizza">Pizza</option> 
 
        <option value="Sushi">Sushi</option> 
 
        <option value="Burgers">Burgers</option> 
 
        <option value="Biryani">Biryani</option> 
 
       </select> 
 
     </div><!-- /.form-group --> 
 
    </div><!-- /.col -->