如何在下拉列表中显示多个选项的 Toast 警报？答案

【问题标题】：How do I display toast alerts for multiple choices in a drop down?如何在下拉列表中显示多个选项的 Toast 警报？
【发布时间】：2017-05-17 16:21:29
【问题描述】：

我有一个名为“FavoriteFoods”的下拉菜单。在这个下拉列表中，我有 4 个选项，“Pizza”、“Sushi”、“Burgers”和“Biryani”。

从“最喜欢的食物”下拉菜单中，当我选择其中一个选项时，我想要一个 toast 弹出窗口来提醒“很棒的选择！”

我如何做到这一点？

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

【问题讨论】：

标签： javascript jquery html toast

【解决方案1】：

您可以只为 select 和 toast 消息绑定 onchange 事件。请在下面找到工作示例

Jsfiddle Example

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

});

【讨论】：

谢谢！如果，当他们选择“披萨”时，它有不同的警报怎么办？如何添加单独的警报消息？
您可以在 onclick 事件中使用 switch case 或业务逻辑，我已经更新了 Jsfiddle。
很抱歉再次打扰您，我无法看到 Jsfiddle 中的变化。
我再次更新了 Jsfiddle 链接。请参考。

【解决方案2】：

假设你使用的是 JQuery，你可以这样做

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

【讨论】：

【解决方案3】：

使用jquery从选择框中选择值。然后比较它并显示警报。示例演示：

$( "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 -->

【讨论】：