Как отфильтровать один выбор на основе выпадающего списка Другой выбор jquery MVC?

Question

У меня есть два выбранных при заполнении представления через ViewData:

В представлении

@{

    IEnumerable<Region> region = ViewData["regions"] as IEnumerable<Region>;
    IEnumerable<City> city = ViewData["cities"] as IEnumerable<City>;
}

  <tfoot>
            <tr>
                <td><input type="text" id="txtTribeName" /></td>
                <td>
                    <select id="ddlregion" name="RegionId">
                        <option value="0">Select Region</option>
                        @foreach (Region re in region)
                        {
                            <option value="@re.RegionID">@re.RegionName</option>
                        }
                    </select>
                </td>
                <td>
                    <select id="ddlcity" name="CityId">
                        <option value="0">Select City</option>
                        @foreach (City re in city)
                        {
                            <option value="@re.CityID">@re.CityName</option>
                        }
                    </select>
                </td>
                @*<td>@Html.dropDropDownListFor(ViewData["regions"] as IEnumerable<SelectListItem>)</td>*@
                <td><input type="button" id="btnAdd" value="Add" /></td>
            </tr>
        </tfoot>

мой сценарий похож на

$("body").on("change", "#ddlregion", function () {


        });

В сценарии с использованием IEnumerable<City> city Могу ли я отсортировать его по региону

Надежды на предложения.

Редактировать:

Мой контроллер передает регион и город из Ef, как

 TribeEntities Db = new TribeEntities();
    ViewData["regions"] = Db.Regions;
    ViewData["cities"] = Db.Cities;

Answer 1

В раскрывающемся списке вашего города нам нужно добавить атрибут данных. Я использовал data-region. Используйте это как выпадающий список вашего города;

<select id="ddlcity" name="CityId">
   <option  value="0">Select City</option>
   @foreach (City re in city)
   {
      <option data-region="@re.RegionID" value="@re.CityID">@re.CityName</option>
   }
</select>

Затем нам нужно l oop просмотреть опции выпадающего списка City и соответственно показать / скрыть их. Ваш сценарий должен выглядеть так:

$(document).on("change", "#ddlregion", function() {
   var selectedRegion = $(this).val();

   $("#ddlcity").find("option").each(function() {
      if ($(this).data("region") == selectedRegion) {
         $(this).show();
      } else {
         $(this).hide();
      }
   });
});

---

См. Демо c ниже;

$(document).on("change", "#ddlregion", function() {
  var selectedRegion = $(this).val();

  $("#ddlcity").find("option").each(function() {
    if ($(this).data("region") == selectedRegion) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="ddlregion" name="RegionId">
  <option value="0">Select Region</option>
  <option value="1">Region 1</option>
  <option value="2">Region 2</option>
  <option value="3">Region 3</option>
</select>

<select id="ddlcity" name="CityId">
  <option data-region="0">Select City</option>
  <option data-region="1">City 1 in Region 1</option>
  <option data-region="1">City 2 in Region 1</option>
  <option data-region="2">City 1 in Region 2</option>
  <option data-region="3">City 1 in Region 1</option>
  <option data-region="3">City 2 in Region 2</option>
  <option data-region="3">City 3 in Region 3</option>
  <option data-region="3">City 4 in Region 4</option>
</select>