Javascript / jQuery隐藏基于选定下拉项的字段

Question

I have some code that I have created for an OnChange event which works perfectly.

<script type="text/javascript">
                    function UpdEventChanged(selectEl) {
                        var text = selectEl.options[selectEl.selectedIndex].text;
                        if (text == "Sickness" || text == "Holiday") {
                            $("input[id$=eventPostCode").hide();
                            $("#ContentPlaceHolder1_LBLUpdPCReq").hide();
                            $("#ContentPlaceHolder1_lblUpdPC").hide();
                        }

                        else {
                            $("input[id$=eventPostCode").show();
                            $("#ContentPlaceHolder1_LBLUpdPCReq").show();
                            $("#ContentPlaceHolder1_lblUpdPC").show();
                        }
                    }
</script>

I need to integrate the above code to make it work on the Page Load event. Here is my code:

// update Dialog
    $('#updatedialog').dialog({
        autoOpen: false,
        width: 500,
        buttons: {
            "update": function() {
                //alert(currentUpdateEvent.title);

                var eventToUpdate = {
                    id: currentUpdateEvent.id,
                    //title: $("#eventName").val(),
                    title: $("#EventSalesPerson option:selected").text(),
                    description: $("#eventDesc").val(),
                    salesperson: $("#EventSalesPerson option:selected").text(),
                    eventPostCode: $("input[id$=eventPostCode]").val(),
                    eventname: $("#EventEventName option:selected").text()
                };

                 {
                    PageMethods.UpdateEvent(eventToUpdate, updateSuccess);
                    $(this).dialog("close");

                    currentUpdateEvent.title = $("#eventName").val();
                    currentUpdateEvent.description = $("#eventDesc").val();
                    currentUpdateEvent.salesperson = $("#EventSalesPerson option:selected").text();
                    currentUpdateEvent.eventname = $("#EventEventName option:selected").text();
                    currentUpdateEvent.eventPostCode = $("input[id$=eventPostCode]").val();

                    $('#calendar').fullCalendar('updateEvent', currentUpdateEvent);
                    location.reload(true);
                }

            },
            "delete": function() {

                if (confirm("do you really want to delete this event?")) {

                    PageMethods.deleteEvent($("#eventId").val(), deleteSuccess);
                    $(this).dialog("close");
                    $('#calendar').fullCalendar('removeEvents', $("#eventId").val());
                }

            }

        }
    });

If #EventEventName selected text = Holiday or Sickness then I need the following items to be hidden:

"input[id$=eventPostCode"
"#ContentPlaceHolder1_LBLUpdPCReq"
"#ContentPlaceHolder1_lblUpdPC"

And obviously if they are not selected then the above should be displayed.

Thanks

Answer 1

It looks like you need something about like this:

var EventEventNameText = $('#EventEventName').val();
if (EventEventNameText=='Holiday' || EventEventNameText=='Sickness') {
    $('#eventPostCode').hide();
    $('#ContentPlaceHolder1_LBLUpdPCReq').hide();
    $('#ContentPlaceHolder1_lblUpdPC').hide();
}

Let me know how that works for you.