Как получить зависимое значение из выпадающего списка в бритве

Question

Предположим, у меня есть следующий объект:

public class CountryAndState
{
    public string Country { get; set; }
    public List<string> States { get; set; }
}

Этот объект заполнен, на мой взгляд, как показано ниже:

<select id="CountryDropdown" name="CountrySelector">
@foreach (CountryAndState cas in Model.CountryAndState())
{
    <option value="@cas.country">@cas.country</option>
}
</select>

Дело в том, что я хочу заполнить второй dropdownlist с состояниями, зависящими от того, какая страна выбрана в указанном выше dropdownlist.

Однако я не могу получить доступ к идентификатору этого dropdownlist, чтобы получить зависимость в моей бритве код для следующего выпадающего списка состояний.

• поэтому, как мне добавить эту зависимость и динамически заполнить раскрывающийся список моих состояний на основе выбранной страны в первой?

Answer 1

Вы можете сделать так:

Просмотр и Javascript:

   <h1>Cascading Dropdown List of Country, State and City</h1>  
    <hr />  
    <br />  
    <div class="row">  
        <div class="col-lg-3"></div>  
        <div class="col-lg-6">  

            <div class="form-group">  
                <label class="col-md-4 control-label">Country Name</label>  
                <div class="col-md-6">  
                    <select class="form-control" id="ddlCountry"></select><br />  
                </div>  
            </div>  

            <div class="form-group">  
                <label class="col-md-4 control-label">State Name</label>  
                <div class="col-md-6">  
                    <select class="form-control" id="ddlState"></select>  
                    <br />  

                </div>  
            </div>  
            <br />  
            <div class="form-group">  
                <label class="col-md-4 control-label">City Name</label>  
                <div class="col-md-6">  
                    <select class="form-control" id="ddlCity"></select>  

                </div>  
            </div>  
        </div>  
        <div class="col-lg-3"></div>  
    </div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>  
<script>  
    $(document).ready(function () {  

        var ddlCountry = $('#ddlCountry');  
        ddlCountry.append($("<option></option>").val('').html('Please Select Country'));  
        $.ajax({  
            url: 'http://localhost:54188/api/Cascading/CountryDetails',  
            type: 'GET',  
            dataType: 'json',  
            success: function (d) {  
                $.each(d, function (i, country) {  
                    ddlCountry.append($("<option></option>").val(country.CountryId).html(country.CountryName));  
                });  
            },  
            error: function () {  
                alert('Error!');  
            }  
        });  

        //State details by country id  

        $("#ddlCountry").change(function () {  
            var CountryId = parseInt($(this).val());  

            if (!isNaN(CountryId)) {  
                var ddlState = $('#ddlState');  
                ddlState.empty();  
                ddlState.append($("<option></option>").val('').html('Please wait ...'));  

                debugger;  
                $.ajax({  
                    url: 'http://localhost:54188/api/Cascading/StateDetails',  
                    type: 'GET',  
                    dataType: 'json',  
                    data: { CountryId: CountryId },  
                    success: function (d) {  

                        ddlState.empty(); // Clear the please wait  
                        ddlState.append($("<option></option>").val('').html('Select State'));  
                        $.each(d, function (i, states) {  
                            ddlState.append($("<option></option>").val(states.StateId).html(states.StateName));  
                        });  
                    },  
                    error: function () {  
                        alert('Error!');  
                    }  
                });  
            }  


        });  

        //City Bind By satate id  
        $("#ddlState").change(function () {  
            var StateId = parseInt($(this).val());  
            if (!isNaN(StateId)) {  
                var ddlCity = $('#ddlCity');  
                ddlCity.append($("<option></option>").val('').html('Please wait ...'));  

                debugger;  
                $.ajax({  
                    url: 'http://localhost:54188/api/Cascading/CityDetails',  
                    type: 'GET',  
                    dataType: 'json',  
                    data: { stateId: StateId },  
                    success: function (d) {  


                        ddlCity.empty(); // Clear the plese wait  
                        ddlCity.append($("<option></option>").val('').html('Select City Name'));  
                        $.each(d, function (i, cities) {  
                            ddlCity.append($("<option></option>").val(cities.CityId).html(cities.CityName));  
                        });  
                    },  
                    error: function () {  
                        alert('Error!');  
                    }  
                });  
            }  


        });  
    });  
</script> 

Вы можете найти так много разных идей для связывания выпадающего списка Каскад список на inte rnet Размещение некоторых ссылок для справки:

https://www.c-sharpcorner.com/UploadFile/sourabh_mishra1/cascading-dropdownlist-in-Asp-Net-mvc/

https://www.c-sharpcorner.com/blogs/cascading-dropdownlist-in-asp-net-mvc

https://www.aspsnippets.com/Articles/Cascading-Dependent-Country-State-City-DropDownLists-using-jQuery-AJAX-in-ASPNet-MVC.aspx

https://abctutorial.com/Post/26/how-to-create-cascading-dropdownlist-in-aspnet-mvc-%7C-using-jquery-ajax

https://www.aspsnippets.com/Articles/Cascading-Dependent-Country-State-City-DropDownLists-using-Entity-Framework-in-ASPNet-MVC.aspx

https://www.c-sharpcorner.com/article/cascading-dropdown-list-of-country-state-and-city-using-mvc-web-api-and-jquery/

Answer 2

use the jquery min
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

$(document).ready(function(){

$('#CountryDropdown').change(function () {

var txt = $("#CountryDropdown option:selected").text();

var v = $("#CountryDropdown").val();
 here add the dropdown of state

})
});