Jquery UI選擇菜單在對話框中不工作

選擇無法在對話框內部的表格內打開。我包括問題Jquery UI選擇菜單在對話框中不工作

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

來源

2015-02-10 Nick

的問題是，jQuery用戶界面正在生成「下拉」的選擇頁面上，但是這是成爲你彈出股利之外。然後當顯示對話框時，它會覆蓋「下拉菜單」。

如果在出現對話框後將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>

來源

2015-02-10 21:42:07 CupawnTae

比你更有效。 – Nick 2015-02-10 22:31:20

的選擇得到了顯示的代碼片段：無對話框上一些如何。所以我做了內聯樣式。

我希望這是你的預期。

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

來源

2015-02-10 20:50:09 roshan

不，這不是它 - 實際的選擇是應該被隱藏，並有一個「假」一個看起來漂亮，更新的選擇的背景。 'display：hidden'是故意的 – CupawnTae 2015-02-10 21:30:31

你也可以試試這個：

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

來源

2015-10-23 09:51:50 Nimesh

我停了下來兩個問題selectmenu對話框：

1）Selectmenu溢出被對話框隱藏。

2）在jquery 1.10中有突破性的變化，所以對話z-index正在重新計算。點擊對話框內的某個位置後隱藏selectmenu下拉項。

要解決這兩個，你可以只追加selectmenu一些空div身前：

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

其中someDiv是：

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

而且使selectmenu比對話框顯著較高的z-index用戶界面佈局。

從jQueryUI的來源我發現這個對話是由兄弟元素（我敢打賭，他們試圖找到其他對話，但使用append: 'body'迫使selectmenu是在z-index的順序不同的另一要素計算的z-index。

來源

2015-11-27 08:02:00

剛備案。如果你（明智地）要避免慘遭覆蓋的jquery-ui.css的ui-front規則，你可以做的是沿着

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

行的東西在撰寫（CSS3）的時候沒有選擇器選擇一個父母元素符合其子女的條件標準。所以你堅持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>

來源

2017-01-03 10:24:15

Jquery UI選擇菜單在對話框中不工作

回答

相關問題