Search code examples
javascriptjqueryhtmltoast

How do I display toast alerts for multiple choices in a drop down?


I have a drop down called "FavoriteFoods." Within this dropdown, I have 4 choices, "Pizza," "Sushi," "Burgers," and "Biryani."

From the "Favorite Foods" drop down, when I select one of the choices, I want a toast pop-up to alert "Great choice!"

How do I achieve this?

   <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 -->

Solution

  • You can just bind onchange event for select and toast message. Please find working example as below

    Jsfiddle Example

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