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

Question

我想知道，例如，当我在第一个下拉列表中选择值为 BLOCK_CD[10000] 的“blocka”时，如何使第二个下拉列表仅显示值为 OFFICE_NM[aaa] 和 [bbb] [10000]

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.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>

我一年前开始学习编程，所以也许这对你们来说是一个简单的问题。请帮助我，谢谢！

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;
    }
  });
});

这只会在第二次选择中显示那些与您在#block中选择的选项具有相同值的选项

演示

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