jquery-ui的dialog中select弹出内容显示在对话框之后的解决办法

0.组件

jqueryui 的Selectmenu和dialog控件的组合使用

1.现象

如果在html中静态写入的控件，然后在dialog中显示它，那么select的下拉框会被对话框覆盖。

2. 原因

Its a z-index problem.

When you use multiple jquery UI component, jquery library starts adding z-index in a sequence,

Here you initialize select menu first then dialog so dialog has higher zindex than select menu, that’s why select menu coming behind the dialog.

Use select menu initialization code after you initialize dialog

简而言之，初始化顺序反了

3. 解决办法之一

先初始化dialog，然后再初始化dialog中的控件，最后打开dialog；

 $('#dialog-resource').dialog({
        autoOpen: false,
        width: 500,
        height: 'auto',
        autoResize: true,
        resizable: true,
        modal: true
 });
 $('#input-set').append("<select name=\"type\" id=\"type\" style=\"width:100%; height:35px\" class=\"ui-widget-content ui-corner-all\">\
                <option>1</option>\
                <option>2</option>\
                <option>3</option>\
                <option>4</option>\
                <option>5</option></select>");
$('#dialog-resource').dialog("open");

参考：https://forum.jquery.com/topic/selectmenu-on-a-dialog-box