如何根据下拉框选中值显示对应data属性值一致的div

原有代码错误点 #

• 类名大小写不匹配：JS中选择器写的.test_c，HTML里div的class是test_C，jQuery选择器大小写敏感，会匹配不到元素
• me是你通过$(this).val()取到的选中项value值，属于字符串类型，没有.data()方法，调用会直接报错
• 目标元素选择器逻辑错误：你需要筛选的是类为test_C且data-document-id属性等于选中value的元素，原有拼接逻辑完全不成立
• 缺少切换时隐藏其他元素的逻辑：如果后续有多个匹配div，切换选项时之前显示的div不会自动隐藏

修正后可运行代码 #

JS代码

// 类名和HTML保持一致使用大写C
$('.test_C').hide();
$('#test').on("change", function() {
  // 获取当前选中的value值
  const selectedVal = $(this).val();
  // 先隐藏所有test_C类的div
  $('.test_C').hide();
  // 筛选出data-document-id等于选中值的div进行显示
  $('.test_C[data-document-id="'+selectedVal+'"]').show();
})

HTML代码（保持原有结构即可，可补充内容验证效果）

<select name="test" id="test" class="test">
  <option value="default">Select</option>
  <option value="1">Test</option>
</select>
<div class="test_C" data-document-id="1" style="display: none">
匹配到的内容，选择Test选项后可见
</div>

内容的提问来源于stack exchange，提问作者TryHard11332