jQuery/modal dialog:如何在窗口显示时隐藏选中元素

Question

我试图隐藏"FilterBatch"选择输入元素，但没有发生任何事情。窗口打开后，select html输入仍然显示。我还尝试从单击事件调用Hide()。下面是示例代码:

 var modalRerunConfirmDialog = $("<div id="modalRerunConfirmDialog"/>").dialog({
    modal: true,
    autoOpen: false,
    title: "UDS Dashboard - Rerun jobs",
    resizable: false,
    draggable: false,
    dialogClass: "dialogOverride",
    buttons: {
        Yes: function () {
            $("#modalRerunConfirmDialog").dialog("close");
            //do something
        },
        No: function () {
            $(this).dialog("close");
        }
    },
    width: 550
});
var msg = Array();
msg[msg.length] = "<br><br><div style="font-size:2.0em">Filter Your Selection</div>";
msg[msg.length] = "<br/><div><select id="FilterBatch" style="width:500px;"></select></div>";
modalRerunConfirmDialog.html(msg.join(" "));
//Bind the Select Box to the Multiselect jQuery plugin
$("#FilterBatch").multiselect({
    noneSelectedText: "Select Batch",
    selectedList: 1,
    multiple: false,
    click: function (event, ui) {
        FilterBatch_Change(ui.value); <= == I also tried to call.Hide() here !! !
    }
});
//populate the first dropdown box inside the modal window
$.each(arrayIDs, function (index, value) {
    $('#FilterBatch').append($('<option>', {
        value: value,
        text: value
    }));
});
$('#FilterBatch').multiselect("refresh");
//hide the select html element <=== this is not working !!!
$("#FilterBatch").hide();
modalRerunConfirmDialog.dialog("open");

谢谢

Answer 1

您可以将open事件添加到您的对话框中:

$("#modalRerunConfirmDialog").on("dialogopen", function() {
    $("#FilterBatch").hide();
});

或者你可以稍微优化一下代码，像这样:

var msg = "<br><br><div style="font-size:2.0em">Filter Your Selection</div> " +
            "<br/><div><select id="FilterBatch" style="width:500px;"></select></div>"; 
 var modalRerunConfirmDialog = $("<div>", {
    id: "modalRerunConfirmDialog",
    html: msg
}).dialog({
    modal: true,
    autoOpen: false,
    title: "UDS Dashboard - Rerun jobs",
    resizable: false,
    draggable: false,
    dialogClass: "dialogOverride",
    buttons: {
        Yes: function () {
            $("#modalRerunConfirmDialog").dialog("close");
            //do something
        },
        No: function () {
            $(this).dialog("close");
        }
    },
    width: 550,
    open: function(){
        $("#FilterBatch").hide();
    }
});

Answer 2

最酷的方法是使用Knockout.js

http://learn.knockoutjs.com//?教程=邮箱

，但你可以用jQuery!!

JS

$("#idToShowOrHide").addClass('hide-me');

或

$("#idToShowOrHide").removeClass('hide-me');

CSS:

.hide-me{ display:none;}
.iAmOnTop
 { 
    z-index:9999;
    position:fixed;
    margin-left:50%
    margin-top:30%
 }