如何通过jQuery实现下拉框选择时显示指定行？

我来帮你梳理这个下拉框联动逻辑，同时修正代码里的小问题并做优化~

核心逻辑确认 #

你想要实现的是：当用户在下拉框选择「Yes」时，显示指定的#Yes_smoke元素；选择其他选项时隐藏它。这个核心逻辑是完全可行的，但原始代码存在一些细节问题需要调整。

原始代码的问题点 #

• HTML结构不规范：<tr>标签直接被<div class="ex_smoker">包裹是错误的，<tr>必须嵌套在<table>、<tbody>这类表格容器内
• 下拉框选项不完整：<option VALUE...这部分代码未闭合，缺少具体值和标签内容
• jQuery代码可以更简洁：重复调用$('#smoke')会增加DOM查询开销，用$(this)替代更高效

修正后的完整代码示例 #

HTML部分 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="prop">Are you an ex-smoker?</td>
      <td>
        <select name="smoke" id="smoke">
          <option value="" selected="selected">Choose</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
      </td>
    </tr>
    <tr id="Yes_smoke">
      <td class="prop">Additional smoking details:</td>
      <td><input type="text" placeholder="Enter details here"></td>
    </tr>
  </tbody>
</table>

jQuery部分 #

$(function() {
  // 页面初始化时隐藏目标行
  $('#Yes_smoke').hide();
  
  // 监听下拉框的change事件
  $('#smoke').change(function() {
    // 用$(this)获取当前下拉框元素，避免重复DOM查询
    if ($(this).val() === 'Yes') {
      $('#Yes_smoke').show();
    } else {
      $('#Yes_smoke').hide();
    }
  });
});

优化小技巧 #

如果想要更简洁的写法，可以用toggle()方法简化显示/隐藏逻辑：

$(function() {
  $('#Yes_smoke').hide();
  $('#smoke').change(function() {
    // toggle()会根据布尔值自动切换元素显示状态
    $('#Yes_smoke').toggle($(this).val() === 'Yes');
  });
});

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