如何制作一个可以被cshtml中的另一个下拉列表过滤的下拉列表

Question

我想知道，例如，当我在第一个下拉列表中 select "blocka" 的值为 BLOCK_CD[10000] 时，我该如何制作第二个下拉列表仅显示值为 [10000]

的 OFFICE_NM[aaa] 和 [bbb]

1.C#

@{
var dataCollection = JsonConvert.DeserializeObject<BlockCollection>(response1.JsonData);
}

2.json 从上面的 dataCollection 中获取

{"Blocks":[
{"BLOCK_CD":"10000","BLOCK_NM":"blocka"},
{"BLOCK_CD":"20000","BLOCK_NM":"blockb"},],

"Offices":[
{"BLOCK_CD":"10000","OFFICE_CD":"001","OFFICE_NM":"aaa"},
{"BLOCK_CD":"10000","OFFICE_CD":"240","OFFICE_NM":"bbb"},
{"BLOCK_CD":"20000","OFFICE_CD":"243","OFFICE_NM":"ccc"},
{"BLOCK_CD":"20000","OFFICE_CD":"244","OFFICE_NM":"ddd"}]

3.drop 由 json

制作的列表

<div>                        
<select name="bl" id="block">
@foreach (Block block in dataCollection.Blocks)
{
<option value=@block.BLOCK_CD>@block.BLOCK_NM</option>
}
</select>
</div>
<div>
<select name="of" id="office">
@foreach (Office office in dataCollection.Offices)
{
<option value=@office.OFFICE_CD>@office.OFFICE_NM</option>
}
</select>
</div>

我一年前开始学习编程，所以对你来说可能是个简单的问题guys.And请帮助我，谢谢！

Answer 1

你可以尝试使用这样的东西：

$('#block').change(function() {
  var v = $(this).val();

  $('#office option').hide().filter('[value="' + v + '"]').show().each(function() {
    if ($(this).css('display') != 'none') {
      $(this).prop("selected", true);
      return false;
    }
  });
});

这只会在第二个 select 中显示与您在 #block

中 select 编辑的选项具有相同值的那些选项

演示

$('#block').change(function() {
  var v = $(this).val();

  $('#office option').hide().filter('[value="' + v + '"]').show().each(function() {
    if ($(this).css('display') != 'none') {
      $(this).prop("selected", true);
      return false;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <select name="bl" id="block">

    <option value="10000">blocka</option>
    <option value="20000">blockb</option>

  </select>
</div>
<div>
  <select name="of" id="office">

    <option value="10000">aaa</option>
    <option value="10000">bbb</option>
    <option value="20000">ccc</option>
    <option value="20000">ddd</option>

  </select>
</div>

如何制作一个可以被cshtml中的另一个下拉列表过滤的下拉列表

How to make a drop down list which can be filtered by another drop down list in cshtml

jquery

json

filter

razor

drop-down-menu