如何选取<select>标签指定子元素？jQuery toggleClass报错解决

通过数组下标[index]从jQuery元素集合中取值时，拿到的是原生DOM节点，而非jQuery包装实例。原生DOM不存在jQuery提供的toggleClass方法，因此触发TypeError。
你代码中选中的<g>是SVG内的城市点位元素，和<select>的子元素无关，联动逻辑只需要保证索引值匹配即可正确对应到目标城市点位。

1. 修正元素获取方式 #

使用jQuery提供的.eq(index)方法获取指定索引的jQuery包装对象，即可正常调用jQuery的类操作方法：

// 错误写法：返回原生DOM节点，无法调用jQuery类方法
// $('g')[cityIndex].toggleClass('is-checked');

// 正确写法：.eq()返回对应索引的jQuery对象，支持toggleClass/addClass等方法
$('g').eq(cityIndex).toggleClass('is-checked');

如果不想转jQuery对象，也可以直接用原生DOM的类操作API实现同等效果：

// 原生DOM实现方案
$('g')[cityIndex].classList.toggle('is-checked');

2. 补全状态互斥逻辑 #

切换城市时先清除所有点位的高亮状态，再给当前选中项添加高亮，避免多个城市同时高亮的异常：

// select切换事件回调
function changeCity(e) {
  // select的value默认是字符串类型，转成数字保证索引类型正确
  const cityIndex = Number(e.target.value);
  // 清除所有城市的高亮
  $('g').removeClass('is-checked');
  // 给当前选中城市添加高亮
  $('g').eq(cityIndex).addClass('is-checked');
  // 此处可复用地图点位点击时的菜单弹出、数据加载逻辑
  // renderCityPanel(cityIndex);
}

// 绑定select变化事件
$('#citySelect').on('change', changeCity);

3. 统一两端交互逻辑 #

建议把城市切换相关的高亮、弹窗、数据加载逻辑抽成公共函数，地图点位点击、select选择两个入口都调用该函数，同时在地图点位点击事件中同步更新select的选中值，保证两端状态完全一致：

// 公共城市切换方法
function switchCity(cityIndex) {
  // 清除全量高亮
  $('g').removeClass('is-checked');
  // 激活当前城市高亮
  $('g').eq(cityIndex).addClass('is-checked');
  // 渲染城市对应菜单/数据
  renderCityPanel(cityIndex);
  // 同步select选中状态，处理地图点击触发的场景
  $('#citySelect').val(cityIndex);
}

注意：需要保证城市点位的<g>元素排序、select的option排序和你存储的城市数组顺序完全一致，避免索引错位导致高亮城市和选中项不匹配。

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