Question

嗨，我在过滤一个下拉列表和另一个下拉列表时遇到问题，在我添加的search.cshtml文件中

@{
    List<FormCategory> formCategories = ViewBag.formCategories;
    List<Form> forms = ViewBag.forms;
    List<UsersVM> users = ViewBag.Users;
    List<FormSearchResultsVM> results = ViewBag.Results;
}

    <select id="selFormCategories" class="sc-select sc-input" onchange="onFormCategoriesChanged(this)">
      <option id="0"></option>
      @foreach (var formCat in formCategories)
      {
        <option value="@formCat.ID">@formCat.Name</option>
      }
  </select>



 <select id="selForms" class="sc-select sc-input" onchange="onFormsChanged(this)">
      <option id="0"></option>
      @foreach (var form in forms)
      {
        <option value="@form.ID">@form.Name</option>
      }
   </select>

当selFormCategories onchnage事件发生时，我需要过滤selForms下拉列表...

function onFormCategoriesChanged(sel) {
   selectedFormCategory = $(sel).find(':selected').attr('value');

 }

谢谢

Answer 1

这是我能想到的一种方法。首先，我们应该将option元素存储到jquery对象数组中，然后在选择更改时过滤该数组以供显示。

数据属性（数据属性，数据名称等）用于过滤。

在下面的示例中，每当更改车辆选择时，都会清除该选择的品牌并重新填充该车型对应的品牌。

$(document).ready(function(){
  var vehicleList = [];
  var brandsList = [];
  
  // store brands options to variable on document ready
  $("#brands option").each(function(){
    brandsList.push($(this));
  });
  
  // clear brands select to hide option fields
  $("#brands").html("");

  // vehicle select on change, refill brands with matching data-vehicle value
  $("#vehicle").change(function(){
    
    var brandsSelect = $("#brands");
    var vehicleValue = $(this).val();
    
    brandsSelect.html("");
    brandsSelect.show();
    
    $(brandsList).each(function(){
      if($(this).data("vehicle") == vehicleValue){
        $(brandsSelect).append($(this));
      }
    });
  });
});

<html>
  <body>
    <h5>Select a Vehicle Type</h5>
    <select id="vehicle">
      <option>Motorcycle</option>
      <option>Car</option>
    </select>
    
    <h5>Choose Brand</h5>
    <select id="brands" hidden>
      <option data-vehicle="Motorcycle">Yamaha</option>
      <option data-vehicle="Motorcycle">Kawasaki</option>
      <option data-vehicle="Car">Mercedes Benz</option>
      <option data-vehicle="Car">BMW</option>
      <option data-vehicle="Car">Audi</option>
    </select>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

通过另一个下拉列表ID ASP.Net筛选下拉列表

1 个答案: