更改下拉菜单时打开对话框

Question

当用户将下拉列表从默认值男性更改为女性时，我试图打开一个弹出窗口（一些对话框）。
我使用了上一篇文章中的 JS 代码，但没有任何反应，在我收到的检查元素告诉我没有对话框，知道如何使它工作吗？
我也尝试过发出警报，但是当我更改下拉列表中的选择时也没有任何反应...... 我对 JS 和 Jquery 很陌生...

public class Ad
    {
        public int Name { get; set; }
        public string Email { get; set; }

  public IEnumerable<SelectListItem> Gender
        {
            get
            {
                return new[]
                {
                    new SelectListItem {Value = "M", Text = "Male"},
                    new SelectListItem {Value = "F", Text = "Female"}
                };
            }
        }

Index.cshtml 代码。

@model IEnumerable<Ad.Models.Ad>
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://code.jquery.com/ui/1.9.2/jquery-ui.min.js'></script>


    <script type="text/javascript">

        $(document).ready(function () {
            $('#M').change(function () {
                if ($(this).val() === "F") {
                    alert("I am an alert box!");
                    dialog.dialog('open');
                }
            });
        });

    </script>
<h3>My APP</h3>


p>
    @using (Html.BeginForm())
    {

    }


    @*<br style="margin-bottom:240px;" />*@
    @Html.ActionLink("Create", "Create",
        null, htmlAttributes: new { @class = "mybtn" })
    <p>

    </p>


    <style type="text/css">
        a.mybtn {
            background: #fa0088;


        }
    </style>

  <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Gender)
     </th>
            <th></th>
        </tr>


   @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DropDownListFor(modelItem => item.Geneder, item.Gender, new { id = "M" })

                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                </td>

            </tr>

Answer 1

通常当没有 id 为“对话框”的 div 时会出现问题。 javascript变量应初始化为dialog = $('#dialog')

<script type="text/javascript"> 
  $(document).ready(function () { 
     $("#M").change(function () { 
          alert($(this).val());  
          alert($(this).val() == "F"); 
     if ($(this).val() == "F") { 
             alert("I am an alert box!");
              //dialog.dialog('open'); //commenting out this line would tell where the problem lies.
       } 
    }); 
  }); 
</script>

更新： 要将其应用于多个选择框，您应该使用类选择器，例如 jQuery 的 .M，而不是 id 选择器 #M。首先我们需要给同一个类M所有的选择框。

@Html.DropDownListFor(modelItem => item.Geneder, item.Gender, new { id = "M", @class = "M" })

现在将$("#M").change(function () { 更改为$(".M").change(function () {。

Answer 2

$('#M') 替换为$('select')