Question

我想创建一个dialog box containing dropdown menu's。此对话框将弹出on a button click event in jQuery。我之前没有任何HTML内容，因此，这将是即时的。 All the dropdown items will be predefined/hard-coded。到目前为止，我写了这个：

$(document).ready(
    function() {
        var button = $('<div class="toolbar content-header-toolbar"><a href="javascript:void(0)">Start Job</a></div>');

        $("a", button).click(
            function()
            {
                $('<div></div>').dialog({
                            modal: true,
                             title: "Confirmation",
                            open: function() {
                            var markup = 'USER SELECTION';
                            $(this).html(markup);
                    },
                    buttons: {
                            Ok: function() {
                             $( this ).dialog( "close" );
                            }
                            }
                    }); 
               }
        );  
    }
);

这为我提供了一个标题为USER SELECTION和按钮OK to close the dialog box.

的对话框

我如何create dropdown menus in such a dialog box?再一次，我do not have any HTML之前的内容。另外我想在代码中填写下拉列表，因为它们是预定义的。例如，一个下拉列表将为user profile，其中包含profile 1, profile 2 or profile 3 as their selection。

预期输出显示如下：

上述预期输出图片显示3个下拉菜单SELECT A JOB，TEST PROFILE和EXPERIMENTS。然后，用户将选择这些菜单的值，并根据需要点击RUN按钮。

用户点击RUN按钮后，如何发送dropdown selected data via an AJAX request？（也许下面的东西会起作用吗？）：

$.ajax({        
            url: 'something.php',
            data: {...dropdown data...}
            type: 'post',             
            success: function(response) {}
});

不是jQuery，JS / AJAX的专家，一个很好的例子会有所帮助。

Answer 1

首先，我重新创建了原始示例：https://jsfiddle.net/Twisty/6150mygp/

$(document).ready(function() {
  var toolbar = $("<div>", {
    class: "toolbar content-header-toolbar",
  })
  var button = $("<a>", {
      href: "#"
    })
    .html("Start Job")
    .click(function() {
      var dlg = $("<div>", {
        id: "menuDialog"
      }).dialog({
        modal: true,
        title: "Confirmation",
        open: function() {
          var markup = 'USER SELECTION';
          $(this).html(markup);
        },
        buttons: {
          Ok: function() {
            $(this).dialog("close");
          }
        }
      });
    }).appendTo(toolbar);
  toolbar.appendTo("body");
});

这为我们提供了一个工作按钮，该按钮启动了正确的对话框。

接下来我们需要制作初始菜单标题链接。这些将取消隐藏菜单，以便用户可以进行选择。

在这里，我们可以看到菜单，还有一些工作要做：https://jsfiddle.net/Twisty/6150mygp/2/

$(document).ready(function() {
  var toolbar = $("<div>", {
    class: "toolbar content-header-toolbar",
  });
  var button = $("<a>", {
      href: "#"
    })
    .html("Start Job")
    .click(function() {
      var dlg = $("<div>", {
        id: "menuDialog"
      }).dialog({
        modal: true,
        title: "Confirmation",
        open: function() {
          var markup = '<span style="display: block; width: 100%; text-align: center" class="title">USER SELECTION</span>';
          var topMenu = $("<ul>", {
            id: "topMenu",
            style: "margin: 0;"
          });
          topMenu.append("<li data-menu='job'><a href='#'>SELECT A JOB</a></li><li data-menu='profile'><a href='#'>TEST PROFILE</a></li><li data-menu='exp'><a href='#'>EXPERIMENTS</a></li>");
          topMenu.find("li a").on("click", function() {
            var selection = $(this).data("menu");
            console.log("Clicked " + selection);
          });
          markup += '<style>#topMenu li { display: inline-block; width: 33%; list-style: none;} .ui-menu { width: 150px; } ul.subMenu { display: hidden; }</style>';
          markup += topMenu.prop('outerHTML');
          var jobMenu = $("<ul>", {
              class: "subMenu"
            }),
            proMenu = jobMenu.clone(),
            expMenu = jobMenu.clone();
          jobMenu.attr("id", "jobMenu")
            .css({
              width: "33%",
              display: "inline-block"
            })
            .append("<li>Android Phone</li><li>iOS Phone</li><li>iOS Tablet</li>")
            .menu();
          proMenu.attr("id", "proMenu")
            .css({
              width: "33%",
              display: "inline-block"
            })
            .append("<li>Profile 1</li><li>Profile 2</li><li>Profile 3</li>")
            .menu();
          expMenu.attr("id", "expMenu")
            .css({
              width: "33%",
              display: "inline-block"
            })
            .append("<li>Experiment 1</li><li>Experiment 2</li><li>Experiment 3</li>")
            .menu();
          $(this).html(markup).append(jobMenu, proMenu, expMenu);
        },
        buttons: {
          Ok: function() {
            $(this).dialog("close");
          }
        },
        width: "640"
      }).css("font-size", "85%");
      return false;
    })
    .appendTo(toolbar);
  toolbar.appendTo("body");
  $("body").find("#topMenu li").on("click", function() {
    var selection = $(this).data("menu");
    console.log("Clicked " + selection);
  });
});

你没有提到是否可以使用CSS，所以我已经避免了这一点以及避免使用任何初始HTML。如您所见，在jQuery中构建元素，为它们分配UI，然后附加它们更容易。由于我们在加载时没有DOM，因此我们可以分配所需的各种代码和结构。

以下代码仍然为您提供了一些可以自行修复或调整的内容。工作示例：https://jsfiddle.net/Twisty/6150mygp/4/

<强>的jQuery

function showMenu(m, o) {
  $(".subMenu").hide();
  console.log("Showing #" + m + "Menu");
  console.log("Setting #" + m + "Menu position to: { my: 'left top', at: 'right top', of: '#" + o + "' }");
  $("#" + m + "Menu").menu({
    position: {
      my: "left top",
      at: "right top",
      of: "#" + o
    }
  }).show();
}

function enableRun() {
  if (Object.keys(jobOptions).length === 3) {
    console.log("All options set. ", jobOptions);
    $("#run").prop("disabled", false).removeClass("ui-state-disabled");
  }
}
var jobOptions = {};
$(document).ready(function() {
  var toolbar = $("<div>", {
    class: "toolbar content-header-toolbar",
  });
  var button = $("<a>", {
      href: "#"
    })
    .html("Start Job")
    .click(function() {
      var dlg = $("<div>", {
        id: "menuDialog"
      }).dialog({
        modal: true,
        title: "Confirmation",
        open: function() {
          var markup = '<span style="display: block; width: 100%; text-align: center" class="title">USER SELECTION</span>';
          var topMenu = $("<ul>", {
            id: "topMenu",
          });
          var ml1 = $("<li>", {
              'data-menu': ''
            }),
            ml2 = ml1.clone(),
            ml3 = ml1.clone();
          ml1.html("SELECT A JOB").attr("data-menu", "job").appendTo(topMenu);
          ml2.html("TEST PROFILE").attr("data-menu", "pro").appendTo(topMenu);
          ml3.html("EXPERIMENTS").attr("data-menu", "exp").appendTo(topMenu);
          topMenu.menu({
            select: function(e, ui) {
              console.log("#topMenu Item Selected.");
              showMenu(ui.item.data("menu"));
            }
          });
          markup += '<style>#topMenu { width: 480px; margin: 10px auto; }\r\n#topMenu li { display: inline-block; width: 138px; list-style: none;}\r\n#jobMenu li, #proMenu li, #expMenu li { padding-left: 20px; }</style>';
          markup += topMenu.prop('outerHTML');
          var jobMenu = $("<ul>", {
              class: "subMenu"
            }),
            proMenu = jobMenu.clone(),
            expMenu = jobMenu.clone();
          jobMenu.attr("id", "jobMenu")
            .append("<li>Android Phone</li><li>iOS Phone</li><li>iOS Tablet</li>")
            .menu({
              select: function(e, ui) {
                ui.item.append("<span class='ui-icon ui-icon-check'></span>");
                jobOptions['job'] = ui.item.text();
                enableRun();
              }
            });
          proMenu.attr("id", "proMenu")
            .append("<li>Profile 1</li><li>Profile 2</li><li>Profile 3</li>")
            .menu({
              select: function(e, ui) {
                ui.item.append("<span class='ui-icon ui-icon-check'></span>");
                jobOptions['profile'] = ui.item.text();
                enableRun();
              }
            });
          expMenu.attr("id", "expMenu")
            .append("<li>Experiment 1</li><li>Experiment 2</li><li>Experiment 3</li>")
            .menu({
              select: function(e, ui) {
                ui.item.append("<span class='ui-icon ui-icon-check'></span>");
                jobOptions['experiment'] = ui.item.text();
                enableRun();
              }
            });
          jobMenu.hide();
          proMenu.hide();
          expMenu.hide();
          $(this).html(markup).append(jobMenu, proMenu, expMenu);
        },
        buttons: [{
          id: "run",
          text: "Run",
          class: "ui-state-disabled",
          disabled: true,
          click: function() {
            $.ajax({
              url: 'something.php',
              data: jobOptions,
              type: 'post',
              success: function(response) {
                alert("Job is running.");
              }
            });
          }
        }, {
          id: "cancel",
          text: "Cancel",
          click: function() {
            $(this).dialog("close");
          }
        }],
        width: "640"
      }).css("font-size", "85%");
      return false;
    })
    .appendTo(toolbar);
  toolbar.appendTo("body");
  $("body").on("click", "ul#topMenu li", function() {
    var selection = $(this).data("menu");
    console.log("Clicked " + selection);
    showMenu(selection, $(this).attr("id"));
  });
  $(":button:contains('Run')").prop("disabled", true).addClass("ui-state-disable");
});

我们现在在脚本中有很多事情要做。 showMenu()显示我们从#topMenu中选择的菜单。它通过首先隐藏所有菜单，然后向我们展示我们正在使用的那个菜单来实现这一点。

我将“运行”按钮设置为禁用，直到我们有足够的设置。 enableRun()检查jobOptions对象中是否有3个键，如果有，则启用“运行”按钮。

最后点击并执行Run时，可以使用收集的数据对象执行AJAX。您的PHP脚本将在帖子中收到它，您可以像这样访问它们：

$j = $_POST['job'];
$p = $_POST['profile'];
$e = $_POST['experiment'];

据我所知，这可以做你想要的所有事情。使用已经掌握的HTML布局会更容易。在我看来，它使设置选项更容易。另外，我怀疑如果您通过jQuery构建了所有元素并且没有通过html()或append()对任何HTML进行硬编码，那么您可以使用更少的代码绘制它。我怀疑这也不是唯一的方法。

如果您有任何疑问，请在评论中告诉我们。

使用新的下拉菜单项创建jQuery对话框（任何类型）（包括AJAX请求）

1 个答案: