例如，当我在第一个下拉列表中选择值为block_cd[10000]的“blocka”时，如何使第二个下拉列表只显示值为[10000]的office_nm[aaa]和[bbb]
1.C#
@{
var dataCollection = JsonConvert.DeserializeObject<BlockCollection>(response1.JsonData);
}
2.JSON从上面的数据收集中获取
{"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>
我一年前开始学习编程，所以也许这对你们来说是一个简单的问题。请帮助我，谢谢！
您可以尝试使用以下内容:
$('#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中选择的选项具有相同值的选项
演示
null
$('#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>