Jquery UI selectmenu not working in dialog
The problem is that jQuery UI is generating the "drop-down" for the select on the page, but this is outside the div that becomes your popup. Then when the dialog is displayed, it covers the "drop-down".
If you move the selectmenu()
call to after the dialog appears, it works correctly.
Your snippet updated:
$('.RegularDialog').dialog({
autoOpen: false,
modal: true,
height: 500,
width: 570
});
$('#OpenDialog').click(function(e) {
$('.RegularDialog').dialog('open');
$('select').selectmenu();
});
<head>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<div id="Dialog" title="Edit Dialog" class="RegularDialog">
<form action="">
<table>
<tr>
<td>Select the Type</td>
<td>
<select id="Type">
<option value="a">Type 1</option>
<option value="b">Type 2</option>
<option value="c">Type 3</option>
</select>
</td>
</tr>
</table>
</form>
</div>
<button id="OpenDialog">Open Dialog</button>
</body>