Javascript / jQuery Hide fields based on Selected Drop Down item
<p>I have some code that I have created for an OnChange event which works perfectly. </p>

<pre><code>&lt;script type="text/javascript"&gt;
                    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();
                        }
                    }
&lt;/script&gt;
</code></pre>

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

<pre><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());
                }

            }

        }
    });
</code></pre>

<p>If <code>#EventEventName</code> selected text = Holiday or Sickness then I need the following items to be hidden:</p>

<pre><code>"input[id$=eventPostCode"
"#ContentPlaceHolder1_LBLUpdPCReq"
"#ContentPlaceHolder1_lblUpdPC"
</code></pre>

<p>And obviously if they are not selected then the above should be displayed.</p>

<p>Thanks</p>
