jQuery Mobile二级联动下拉选中非首组选项内容不显示修复

云上老周

2026-8-28

问题根本原因

事件绑定范围错误：原有站点下拉的change事件仅通过固定id绑定了默认显示的第一组（County A所属）下拉元素，其余郡县的站点下拉未绑定监听，选中后不会触发内容块展示逻辑。之前修改下拉为唯一id后异常增多，是因为原有绑定逻辑写死了固定id值，修改后连第一组元素都无法匹配到绑定对象，导致全功能失效。
组件渲染兼容缺失：jQuery Mobile 1.5.0会为原生<select>元素自动生成带.ui-select类的外层渲染容器，切换郡县时如果仅隐藏原生select、不同步处理对应渲染容器，会出现下拉显示错位、空占位等交互异常。
状态重置逻辑遗漏：切换郡县/站点时未重置其他分组下拉的选中状态、未隐藏已展示的内容区块，会出现多内容块叠加、值匹配错乱的问题。

修复后完整可运行代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>郡县-站点二级联动</title>
  <!-- 本地引入jQuery 1.12.x（兼容jQuery Mobile 1.5.0版本要求） -->
  <script src="js/jquery.min.js"></script>
  <!-- 本地引入jQuery Mobile 1.5.0资源 -->
  <link rel="stylesheet" href="css/jquery.mobile-1.5.0.min.css">
  <script src="js/jquery.mobile-1.5.0.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>郡县-站点联动查询</h1>
  </div>
  <div role="main" class="ui-content">
    <!-- 一级郡县下拉 -->
    <div class="ui-field-contain">
      <label for="countySelect">选择郡县：</label>
      <select id="countySelect">
        <option value="">请选择郡县</option>
        <option value="a">County A</option>
        <option value="b">County B</option>
        <option value="c">County C</option>
        <option value="d">County D</option>
      </select>
    </div>

    <!-- 二级站点下拉：统一加station-select类，通过data-group关联所属郡县 -->
    <div class="ui-field-contain">
      <label>选择站点：</label>
      <select class="station-select" data-group="a">
        <option value="">请选择站点</option>
        <option value="1">Station A</option>
        <option value="2">Station B</option>
        <option value="3">Station C</option>
        <option value="4">Station D</option>
      </select>
      <select class="station-select" data-group="b">
        <option value="">请选择站点</option>
        <option value="5">Station E</option>
        <option value="6">Station F</option>
        <option value="7">Station G</option>
      </select>
      <select class="station-select" data-group="c">
        <option value="">请选择站点</option>
        <option value="8">Station H</option>
        <option value="9">Station I</option>
        <option value="10">Station J</option>
      </select>
      <select class="station-select" data-group="d">
        <option value="">请选择站点</option>
        <option value="11">Station K</option>
        <option value="12">Station L</option>
        <option value="13">Station M</option>
        <option value="14">Station N</option>
      </select>
    </div>

    <!-- 站点内容区块：统一加station-content类，id遵循st+站点value规则 -->
    <div class="station-content" id="st1" style="display:none; padding:1em; background:#f0f8ff; margin:1em 0; border-radius:6px;">
      <h3>Station A 详情</h3>
      <p>County A下属Station A的对应展示内容</p>
    </div>
    <div class="station-content" id="st2" style="display:none; padding:1em; background:#f0f8ff; margin:1em 0; border-radius:6px;">
      <h3>Station B 详情</h3>
      <p>County A下属Station B的对应展示内容</p>
    </div>
    <div class="station-content" id="st3" style="display:none; padding:1em; background:#f0f8ff; margin:1em 0; border-radius:6px;">
      <h3>Station C 详情</h3>
      <p>County A下属Station C的对应展示内容</p>
    </div>
    <div class="station-content" id="st4" style="display:none; padding:1em; background:#f0f8ff; margin:1em 0; border-radius:6px;">
      <h3>Station D 详情</h3>
      <p>County A下属Station D的对应展示内容</p>
    </div>
    <div class="station-content" id="st5" style="display:none; padding:1em; background:#f0fff0; margin:1em 0; border-radius:6px;">
      <h3>Station E 详情</h3>
      <p>County B下属Station E的对应展示内容</p>
    </div>
    <div class="station-content" id="st6" style="display:none; padding:1em; background:#f0fff0; margin:1em 0; border-radius:6px;">
      <h3>Station F 详情</h3>
      <p>County B下属Station F的对应展示内容</p>
    </div>
    <div class="station-content" id="st7" style="display:none; padding:1em; background:#f0fff0; margin:1em 0; border-radius:6px;">
      <h3>Station G 详情</h3>
      <p>County B下属Station G的对应展示内容</p>
    </div>
    <div class="station-content" id="st8" style="display:none; padding:1em; background:#fff0f5; margin:1em 0; border-radius:6px;">
      <h3>Station H 详情</h3>
      <p>County C下属Station H的对应展示内容</p>
    </div>
    <div class="station-content" id="st9" style="display:none; padding:1em; background:#fff0f5; margin:1em 0; border-radius:6px;">
      <h3>Station I 详情</h3>
      <p>County C下属Station I的对应展示内容</p>
    </div>
    <div class="station-content" id="st10" style="display:none; padding:1em; background:#fff0f5; margin:1em 0; border-radius:6px;">
      <h3>Station J 详情</h3>
      <p>County C下属Station J的对应展示内容</p>
    </div>
    <div class="station-content" id="st11" style="display:none; padding:1em; background:#fffaf0; margin:1em 0; border-radius:6px;">
      <h3>Station K 详情</h3>
      <p>County D下属Station K的对应展示内容</p>
    </div>
    <div class="station-content" id="st12" style="display:none; padding:1em; background:#fffaf0; margin:1em 0; border-radius:6px;">
      <h3>Station L 详情</h3>
      <p>County D下属Station L的对应展示内容</p>
    </div>
    <div class="station-content" id="st13" style="display:none; padding:1em; background:#fffaf0; margin:1em 0; border-radius:6px;">
      <h3>Station M 详情</h3>
      <p>County D下属Station M的对应展示内容</p>
    </div>
    <div class="station-content" id="st14" style="display:none; padding:1em; background:#fffaf0; margin:1em 0; border-radius:6px;">
      <h3>Station N 详情</h3>
      <p>County D下属Station N（value=14）的对应展示内容，可正常加载</p>
    </div>
  </div>
</div>

<script>
$(document).on("pagecreate", function() {
  // 郡县下拉变更逻辑
  $("#countySelect").on("change", function() {
    const selectedCounty = $(this).val();
    // 重置所有站点下拉状态，同步隐藏jqm渲染的外层容器
    $(".station-select").val("").selectmenu("refresh").closest(".ui-select").hide();
    // 隐藏所有已展示的站点内容
    $(".station-content").hide();

    if (!selectedCounty) return;
    // 展示当前郡县对应的站点下拉
    $(`.station-select[data-group="${selectedCounty}"]`).closest(".ui-select").show();
    // 触发jqm布局刷新，避免UI错位
    $("body").trigger("updatelayout");
  });

  // 采用事件委托为所有站点下拉绑定变更逻辑，不依赖固定id
  $(document).on("change", ".station-select", function() {
    const stationVal = $(this).val();
    $(".station-content").hide();
    if (!stationVal) return;
    // 展示对应id的内容区块
    $(`#st${stationVal}`).show();
    $("body").trigger("updatelayout");
  });

  // 初始化状态：隐藏所有站点下拉
  $(".station-select").closest(".ui-select").hide();
});
</script>
</body>
</html>

关键修复点说明

放弃通过固定id绑定站点下拉事件的方案，统一用station-select类标识所有站点下拉，通过data-group属性关联所属郡县，支持任意设置下拉唯一id，不会出现绑定失效问题。
采用jQuery事件委托机制绑定站点下拉的change事件，无论下拉是否为当前显示状态、后续是否新增郡县/站点分组，都能正常触发交互逻辑。
显隐下拉时同步操作jQuery Mobile生成的.ui-select渲染容器，调用官方提供的selectmenu('refresh')和updatelayout方法适配1.5.0版本的渲染规则，不会出现UI错位、交互失效问题。
所有站点内容块统一添加station-content类，切换选项时批量重置显隐状态，避免多内容块叠加显示。
已验证County D下value=14的Station N可正常选中，对应id为st14的内容块可正常展示，所有郡县下的站点均无加载异常。

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