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

Question

我有一些为OnChange事件创建的代码，它可以正常工作。

<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>

我需要集成以上代码以使其在Page Load事件上正常工作。 这是我的代码：

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

            }

        }
    });

如果#EventEventName选择的文本=假日或疾病，那么我需要隐藏以下项目：

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

显然，如果未选择它们，则应显示以上内容。

谢谢

Answer 1

看来您需要以下内容：

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

让我知道这对您有用。