Question

我试图在jquery弹出窗口中显示<select menu>但有问题。由于某种原因，它根本没有显示出来。我已经更改了<select>标记的z-index属性，但仍然没有运气。有人可以帮忙吗？

jQuery弹出代码：

$(document).ready(function () {
    //$("#update_work_order_general").fancybox().trigger('click');
    $("#loader .canvas").html($("#update_work_order_general").html()).css("padding", "20px");
    $(".overlay").show();
    $("html, body").animate({
        scrollTop: $("body").offset().top + 40
    }, 1000);
    $("#loader").fadeIn(500).show();
});

Popup有效，只是它没有显示我的<select menu>

html代码：

<div id="update_work_order_general" style="width:950px;display: none;">

<table class="seltable" width="100%" border="0" cellpadding="2" cellspacing="0" >
<tr>
<td class="form-head" align="left" colspan="10">Information</td>

<tr>
<td align="left">&nbsp;<b>Work Order Type</b></td>
<td>
<select class="selmenu-wo" name="type" >
<option value="0">None</option>
<option value="1">Employee</option>
<option value="2">Special Forces</option>
<option value="3">Test</option>
</select> 
</td>
</tr>
</table>

Css：

.selmenu-wo { 
font-size: 13px; 
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
margin-bottom:5px;
margin-top:5px;
padding: 6px;  
border: 1px solid #C9C9C9; 
position:relative;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px #d9d9d9;
-moz-box-shadow: 0px 0px 8px #d9d9d9;
-webkit-box-shadow: 0px 0px 8px #d9d9d9;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}

Answer 1

删除colspan属性：

<td class="form-head" align="left" colspan="10">Information</td>
    //----------------------------^^^^^^^^^^^^^---remove this attribute

Answer 2

通过添加

修复

$("select[name='type'], select[name='type2']").attr('style','');

后

<script type="text/javascript">
$(document).ready(function() {
$("#loader .canvas").html($("#update_work_order_general").html()).css("padding","20px");
$(".overlay").show();
$("html, body").animate({
scrollTop: $("body").offset().top+40
},1000);
$("#loader").fadeIn(500).show();

在jquery弹出窗口中显示<select>下拉列表</select>

2 个答案: