如何根据下拉列表（ajax）选择数据列表 [英] How do I select a list of data depending on Dropdownlist (ajax)

问题描述

嘿伙计们有这个;我把它拿在一篇文章中，我的项目非常相似

但是这显示了另一个dropdownList中的状态列表，我该怎么办才能改变这个项目下显示< table>中的状态???? b $ b任何人都可以帮助我吗？

< script type =  文本/ JavaScript的> 
 $（ function （）{
 $（ ＃CountryId）。change（ function （）{
  var  selectedItem = $（ this ）。val（）; 
  var  ddlStates = $ （ ＃StateId）; 
  var  statesProgress = $（ ＃states-loading-progress）; 
 statesProgress.show（）; 
 $ .ajax（{
 cache： false ，
 type：  GET，
 url：  @（Url.RouteUrl（ GetStatesBy CountryId  ）），
 data：{  countryId：selectedItem}，
成功：功能（数据） {
 
 
 ddlStates.html（' '）; 
 $ .each（data， function （id，option）{
 ddlStates.append（$（' < option>< / option>'）。val（option.id）.html（option.name））; 
 
  //   ddlStates.html（''）;  
  //   $。each（data，function（id，label）{ 
  //   ddlStates.append（$（'< label>< / label>'）。val（label.id）.html（label。 name））;  
 
}）; 
 statesProgress.hide（）; 
}，
错误： function （xhr，ajaxOptions，thrownError）{
 alert（' 无法检索状态。'）; 
 statesProgress.hide（）; 
} 
}）; 
}）; 
}）; 
< / script> 

 @ Html.LabelFor（model => model .CountryId）
 @ Html.DropDownListFor（model => model.CountryId，Model.AvailableCountries）
 
 <   br     /  >  
 
 @ Html.LabelFor（model => model.StateId）
 @ Html.DropDownListFor（model => model.StateId，Model.AvailableStates） 
 
 <   span     id   =  states-loading-progress     style   = < span class =code-keyword> display：none; > 请等待.. <   / span  >  

解决方案

（ function （）{

（ ＃CountryId）。change（ function （）{
var selectedItem =

（此）VAL（）;
var ddlStates =

hey guys have this;I took it in a article , my project is quite similar
but this show a list of states in another dropdownList, what can I do to change this project under to show the states in a <table> ???
can anyone help me ?

<script type="text/javascript">
    $(function () {
        $("#CountryId").change(function () {
            var selectedItem = $(this).val();
            var ddlStates = $("#StateId");
            var statesProgress = $("#states-loading-progress");
            statesProgress.show();
            $.ajax({
                cache: false,
                type: "GET",
                url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                data: { "countryId": selectedItem },
                success: function (data) {


                    ddlStates.html('');
                    $.each(data, function (id, option) {
                        ddlStates.append($('<option></option>').val(option.id).html(option.name));

                    //ddlStates.html('');
                    //$.each(data, function (id, label) {
                    //    ddlStates.append($('<label></label>').val(label.id).html(label.name));

                    });
                    statesProgress.hide();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Failed to retrieve states.');
                    statesProgress.hide();
                }
            });
        });
    });
</script>

@Html.LabelFor(model => model.CountryId)
@Html.DropDownListFor(model => model.CountryId, Model.AvailableCountries)

<br />

@Html.LabelFor(model => model.StateId)
    @Html.DropDownListFor(model => model.StateId, Model.AvailableStates)

        <span id="states-loading-progress" style="display: none;">Please wait..</span>

解决方案

(function () {

("#CountryId").change(function () { var selectedItem =

(this).val(); var ddlStates =

这篇关于如何根据下拉列表（ajax）选择数据列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！