如何在一个视图中执行多个onchange事件 [英] How to do multiple onchange events in one view

问题描述

我有国家，州和城市的下拉列表。国家到州Javascript onchange工作正常。现在我想填充城市下拉列表。我创建了另一个onchange事件，但它不起作用，我认为它不起作用，因为下拉列表由JavaScript重新填充。填充之前的原始下拉列表是@ Html.DropdownListFor，它由JavaScript选择的Html选项替换。我的问题是如何重新排列JavaScript代码，以便我可以添加城市下拉列表。以下是视图中的3个项目的JavaScript代码和视图。





感谢您的帮助！



我尝试过：



查看：

I have a dropdown for Country, State, and City. Country to State Javascript onchange works fine. Now I want to populate the cities dropdown. I created another onchange event but it is not working and I am thinking it is not working because the dropdown is repopulated by the JavaScript. The original dropdown before populated is a @Html.DropdownListFor this is replaced by an Html options select by JavaScript. My question is how do I rearrange the JavaScript code so that I can add the cities dropdown. Below is the JavaScript code and View of the 3 items in the View.


Thanks for your help!

What I have tried:

View:

<div class="form-group">
    @Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => Model.Country, Model.Countries, "---Select Country---", new { @class = "form-control", @id = "ddlCountry" })
        @Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
    <div id="State" class="col-md-10">
        @Html.DropDownListFor(model => model.State, new List<SelectListItem>(),"---Select State---", new { @class = "form-control", @id = "ddlState" })
        @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
    <div id="City" class="col-md-10">
        @Html.DropDownListFor(model => model.City, new List<SelectListItem>(), "---Select City---", new { @class = "form-control"})
        @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
    </div>
</div>

JavaScript：

JavaScript:

<script type="text/javascript">
    $(function () {
        $('#ddlCountry').change(function () {
            $.ajax({
                type: "post",
                url: "/Addresses/GetStates",
                data: { countryId: $('#ddlCountry').val() },
                datatype: "json",
                traditional: true,
                success: function (data) {
                    var st = "<select class='form-control' id='ddlState'>";
                    st = st + '<option value="">--Select State--</option>';
                    for (var i = 0; i < data.length; i++) {
                        st = st + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
                    }
                    st = st + '</select>';
                    $('#State').html(st);
                }
            });
        });
    });

    $(function () {
        $('#ddlState').change(function () {
            $.ajax({
                type: "post",
                url: "/Addresses/GetCities",
                data: { stateId: $('#ddlState').val() },
                datatype: "json",
                traditional: true,
                success: function (data) {
                    var ct = "<select  class='form-control' id='ddlCity'>";
                    ct = ct + '<option value="">--Select City--</option>';
                    for (var i = 0; i < data.length; i++) {
                        ct = ct + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
                    }
                    ct = ct + '</select>';
                    $('#City').html(ct);
                }
            });
        });
    });
</script>

推荐答案

（ function （ ）{

（' #ddlCountry'）。change（ function （）{

('#ddlCountry').change(function () {

.ajax（{
type： post，
url： /地址/ GetStates，
数据：{countryId：

.ajax({ type: "post", url: "/Addresses/GetStates", data: { countryId:

这篇关于如何在一个视图中执行多个onchange事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！