Jquery UI 选择菜单在对话框中不起作用

Question

select 在 table 对话框内时不会打开。我包含了问题的代码片段

$('select').selectmenu();
$('.RegularDialog').dialog({
  autoOpen: false,
  modal: true,
  height: 500,
  width: 570
});
$('#OpenDialog').click(function(e) {
  $('.RegularDialog').dialog('open');
});

<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>

Answer 1

select 在对话框中以某种方式获得 display:none。所以我在上面做了内联样式。

希望这是您所期望的。

  $('select').selectmenu();
  $('.RegularDialog').dialog({
    autoOpen: false,
    modal: true,
    height: 500,
    width: 570
  });
  $('#OpenDialog').click(function(e) {
    $('.RegularDialog').dialog('open');
  });

<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 style="display:inline-block !important;vertical-align:top;" 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>

Answer 2

问题是 jQuery UI 正在为页面上的 select 生成 "drop-down"，但这在 div 之外你的弹出窗口。然后显示对话框时，它覆盖了 "drop-down".

如果在对话框出现后将 selectmenu() 调用移至，它会正常工作。

您的代码段已更新：

$('.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>

Answer 3

你也可以试试这个：

.ui-front{z-index:0 !important; } 
.ui-selectmenu-open {z-index:9999 !important;}

Answer 4

我解决了对话框中选择菜单的两个问题：

1) 选择菜单溢出被对话框隐藏。

2) 在 Jquery 1.10 中有重大变化，因此对话框 z-index 正在重新计算。这会在单击对话框内某处后隐藏选择菜单下拉项。

要解决这两个问题，您只需将 selectmenu 附加到 body:

之前的空 div

$('select').selectmenu({ 
   appendTo: '#someDiv'
})

其中 someDiv 是：

<body>
   ...
   <div id="somediv"></div>
</body>

并使选择菜单 z-index 显着高于对话框 ui- 前端布局。

从 jqueryUI 来源我发现该对话框正在通过同级元素计算 z-index（我打赌他们试图找到其他对话框，但使用 append: 'body' 强制 selectmenu 成为 z-index 顺序中的另一个元素。

Answer 5

仅作记录。如果你（明智地）想避免粗暴地覆盖 jquery-ui.css 的 ui-front 规则，你可以做的是

    $( 'div.ui-front:has("ul[id^=dropdown_]")').css('z-index',1005);

在撰写本文时 (css3) 上没有 select 或 select 一个 parent 元素children 的条件标准。所以你被 jquery.

困住了

$(document).ready(function() {
 
    $( "select[id^=dropdown]" ).selectmenu();
    $( 'div.ui-front:has("ul[id^=dropdown_]")').css('z-index',1005);
 
});

html, body {
    height: 100%;
  }
 
  * {
    margin: 0px;
    padding: 0px;
  }
 
.ui-selectmenu-button.ui-button {
    width: 100px !important;
}
 
#low, #medium, #high {
    position:absolute;
    top:20px;
    width: 150px;
    padding:10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    box-shadow: 4px 4px 4px 0 #999;
}
 
#low::before, #medium::before, #high:before {
    display:block;
    height: 2em;
    font: 1.1em arial ;
}
 
#low::before {
    content: 'z-index: 0' ;
}
 
#low {
    z-index: 0;
    background-color: #cff;
    border-color: #8aa;
    left: 20px;
}
 
#medium::before {
    content: 'z-index: 50' ;
}
 
#medium {
    z-index: 50;
    background-color: #fcf;
    border-color: #a8a;
    left: calc(50% - 75px);
}
 
#high::before {
    content: 'z-index: 1000' ;
}
 
#high {
    z-index: 1000;
    background-color: #ffc;
    border-color: #aa8;
    right: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
    <div id="low">
    <select id="dropdown_01">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
    </select>
    </div>
    <div id="medium">
    <select id="dropdown_02">
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
        <option>Option D</option>
        <option>Option E</option>
    </select>
    </div>
    <div id="high">
    <select id="dropdown_03">
        <option>Option a</option>
        <option>Option b</option>
        <option>Option c</option>
        <option>Option d</option>
        <option>Option e</option>
    </select>
    </div>

Answer 6

我知道这很老了，但有一种情况是接受的答案不起作用。

如果使用 CSS 将 selectmenu z-index 更改为更高的值，选项列表将保留在对话框后面（至少在我的情况下），即使上述补救措施是叫。在我的例子中，由于应用程序冲突，需要增加所有 ui-dialogs 的 z-index。

有两种方法可以解决这个问题（在这个例子中，所有对话框的 z-index 设置为 z-index: 750 使用 CSS）：

使用JQuery：

$('#selectmenu-menu').parent().css('z-index', '751');

在初始化特定的 selectmenu

时使用 CSS / 类选项

CSS

.maxz {
    z-index: 751;
}

JavaScript

$('#selectmenu').selectmenu({
    classes: {
        "ui-selectmenu-open": "maxz"
    }
})

发生了什么：

.ui-dialog 的 z-index 是通过 CSS 设置的（数字可能因您的应用程序而异，但您可以了解 if 的要点）。在此示例中，我将使用 750.
创建 selectmenu 元素时，"options" 是在无序列表中创建的。该列表具有原始 select 菜单的 ID，并附加了“-menu”。
为了将列表置于对话框上方，您必须将列表包装元素的 z-index 更改为至少 751，更改无序列表的 z-index 无效。
在第一个示例中，我们处理列表的包装器元素（其父元素），使其比对话框高 1 个索引，从而位于顶部。
在第二个例子中，CSS 解决了问题本身。我们简单的创建一个CSSclass，z-index的值比设置的dialog z-index高1，然后在[=111=中使用'classes'选项]menu 初始化以将 class 分配给 'ui-selectmenu-open'（添加到 ui-selectmenu-menu 包装器元素的 class单击并打开菜单）。

选择 #1

在第一个例子中，select菜单初始化后必须包含以上内容。

$('#menu1').selectmenu({
    *setup and functions added here*
});
$('#menu1-menu').parent().css('z-index', '751');

请注意，至少对我而言，尝试将代码包含在受影响的 select 菜单的创建事件中没有任何效果，必须在菜单初始化之后单独调用它。

选择 #2

第二个例子效率更高

您只需将 .maxz 的 z-index 值设置为所有对话框的最高 z-index 集 + 1。（不确定我是否理解有 5 个不同对话框的原因5 个不同的 z 索引，但一切皆有可能。)

如果您需要使用此过程初始化多个 select 菜单，并且所有菜单都共享相同的事件，只需按 class 对这些菜单进行分组，然后按 class 而不是 id 进行初始化, 添加上面的 classes 选项。

但是，如果您有多个 select 菜单，每个菜单都有不同的设置属性（即 classes、功能等），您可以将 classes 添加到each如上，或者你可以在每个select菜单中添加一个class，比如"s-max-z"，然后在after都已经完成了已初始化：

$('.s-max-z').selectmenu("option", "classes.ui-selectmenu-open", "maxz");

备注：

在初始化对话框小部件时使用 classes 选项（同时使用模态：true）到 return z-index 为默认值，然后使用接受的答案确实有效，几乎。 select菜单的 z-index 已正确重置并在对话框上方打开，问题是您无法进入对话框做任何事情！

CSS

.minz {
    z-index: initial;
}

JavaScript

$('#dialog').dialog({
    modal: true,
    classes: {
        "ui-dialog": "minz"
    }
})

发生的事情是在窗口小部件覆盖后面打开了对话框，它仍然具有最初为 CSS 中的对话框设置的原始 z-index - 1（在我的例子中为 749）。

因为 widget-overlay 被创建一次并附加到 body 的末尾，所以如果没有很多额外的 CSS / JavaScript 来继续重置 widget-overlay 的 z 是不可能的-出现的每个对话框的索引。

即使只有一个对话框，窗口小部件的 CSS 也必须单独设置（我在 classes 中尝试过对对话框没有影响）。

Jquery UI 选择菜单在对话框中不起作用

Jquery UI selectmenu not working in dialog

jquery

jquery-ui