如何根据另一个选择下拉jquery MVC过滤一个选择？

Posted 2023-05-09

【中文标题】如何根据另一个选择下拉jquery MVC过滤一个选择？

【英文标题】：How to filter One select based on Another select drop down jquery MVC?

【发布时间】：2020-06-14 10:47:35

【问题描述】：

我有两个通过 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;

【问题讨论】：

澄清一下，您要根据所选区域过滤城市吗？按过滤器，你只想排序？还是要隐藏和显示选项？

我想根据地区过滤城市。当我选择特定区域时，城市下拉菜单仅显示该区域下的城市

好的，知道了。您是否会在问题中包含 City Class（代码）。谢谢。

City 类实际上是我直接使用的实体框架城市表。检查我编辑的问题。

City 表有 city id 、 cityname 和 regionid 。其中区域表只有 regionid 和 regionname

【参考方案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>

然后，我们需要遍历城市下拉菜单的选项并相应地显示/隐藏它们。你的脚本应该是这样的；

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

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

---

参见下面的静态演示；

$(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>