在页面加载调用更改两个下拉列表的事件

时间:2016-10-03 14:06:33

标签: javascript c# jquery

首次加载页面时,会显示帮助文本和公告,验证后刷新时,视图上的帮助文本和公告不再显示。我认为我需要在页面上加载调用更改事件以进行下拉,我不确定如何执行此操作。第一个下拉Div ID是#profession,第二个下拉是div id是#enquirytype。

$('#profession').on('change', function (e) { //Gets the ID of profession drop down list
            var selectedVal = $(this).val(); //Variable selectedVal this . value
            $.ajax({ //Ajax declared
                type: 'GET', //Its a get
                url: "@Url.Action("GetenquiryTypes", "UnauthEnquiry")", //It goes to the enquiry controller method GetenquiryTypes
                dataType: 'json', //Datatypes JSON
                data: { SelectedProfession: selectedVal }, //data is SelectedProfession: selectedVal
                success: function (json) { //Jquery Parse Json data from server on ajax success
                    if (json.helptext != undefined && json.helptext != '')
                        {
                        $('#ProfHelp').html(json.helptext)
                        $('#ProfHelpAlert').show(); ///////
                    }
                    else
                        $('#ProfHelpAlert').hide(); ///////

                    var targetDropdown = $('#enquirytype') //Var targetDropDropdown goes to dropdown ID enquiry type
                    targetDropdown.empty(); //target empty dropdown
                    $("<option />", {
                        val: "",
                        text: "Please select enquiry type" //Select enquiry type
                    }).appendTo(targetDropdown); //add to the target dd
                    if (json.enquiryTypes.length > 0) { //if JASON data from server greater then 0
                        for (var EnquiryType in json.enquiryTypes) { //go through each EnquiryType in JSON
                            $("<option />", {
                                val: json.enquiryTypes[EnquiryType].EnquiryId, //mapping
                                text: json.enquiryTypes[EnquiryType].Enquiryname //mapping
                            }).appendTo(targetDropdown); //add to drop down
                        };
                    }
                    targetDropdown.change();
                }
            });
        });


        $('#enquirytype').on('change', function (e) { //onlick of professions DD
            var selectedVal = $(this).val(); //Variable selectedVal this .value
            $('#enquiryTypeHelpAlert').hide(); ///////
            $('#EnquiryTypeAnnouncements').empty();
            if (selectedVal != undefined && selectedVal != '') {
                $.ajax({
                    type: 'GET', //Get 
                    url: "@Url.Action("GetEnquiryTypeAndAnnoncements", "UnauthEnquiry")", //It goes to the enquiry controller method GetenquiryTypes
                    dataType: 'json', //Datatypes JSON
                    data: { SelectedEnquiryType: selectedVal }, //data is SelectedProfession: selectedVal
                    success: function (json) { //Jquery Parse Json data from server on ajax success

                        if (json.helptext != undefined && json.helptext != '') {
                            $('#enquiryTypeHelp').html(json.helptext)
                            $('#enquiryTypeHelpAlert').show(); ///////
                        }
                        else
                            $('#enquiryTypeHelpAlert').hide(); ///////
                        var announcement = $('.EnquiryTypeAnnouncement:first').clone();
                        $('#EnquiryTypeAnnouncements').empty();
                        $('#enquiryTypeHelp').html(json.helptext);
                        for (var i in json.announcements) {
                            var announcementCopy = announcement.clone();
                            announcementCopy.find(".notification").html(json.announcements[i]);
                            $(announcementCopy).appendTo($('#EnquiryTypeAnnouncements')).show();
                            $('#EnquiryTypeAnnouncements').show();
                        }


                    }
                });
            }

        });

2 个答案:

答案 0 :(得分:0)

在ypur脚本的开头,在

等功能中调用您的专业下拉列表
$(document).ready(function () {
$('#profession').change(); //Keeps profession dropdown list help text displayed
});

接下来,查询类型在Jquery中不可用。你从模特那里得到了。使用

var EnquiryType ='@Model.EnquiryType

然后在变更事件中获取它。

答案 1 :(得分:0)

这似乎是正确的,因为更改将保持您的DD帮助文本加载。

$(document).ready(function () {
$('#profession').change(); //Keeps profession dropdown list help text displayed
});

由于它不在Jquery中,你必须从模型中获取它。

var EnquiryType ='@Model.EnquiryType

然后在变更事件中获取它。