I want to create a dialog box containing dropdown menu's. This dialog box will pop up on a button click event in jQuery. I do not have any HTML content prior and so, this will be on the fly. All the dropdown items will be predefined. So far I have written this:
$(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" );
}
}
});
}
);
}
);
This gives me a dialog box with a title USER SELECTION and a button OK to close the dialog box.
How do I create dropdown menus in such a dialog box? Once again, I do not have any HTML content before. Also I want to fill the dropdown list write here in the code as they will be predefined. For example, one dropdown will be of user profile which will have either profile 1, profile 2 or profile 3 as their selection.
The expected output is show below:
The above expected output image shows 3 dropdown menus SELECT A JOB, TEST PROFILE and EXPERIMENTS. User will then select values for these menus and hit the RUN button if desired.
Once the RUN button is hit by the user, I want to send the dropdown selected data via an AJAX request which I think something like below will work:
$.ajax({
url: 'something.php',
data: {...dropdown data...}
type: 'post',
success: function(response) {}
});
Not an expert of jQuery, JS / AJAX, a good example will be helpful.
