如何使用jQuery获取UL/LI元素值并提取关联城市列表

1. 提取城市数组的基础实现 #

如果暂时固定id匹配的场景，直接遍历目标ul下的li提取文本即可：

const cityArr = $('#ui-id-180 li.ui-menu-item').map(function() {
  return $(this).text().trim();
}).get();

上述代码通过map()遍历所有匹配的li节点提取文本，最后用get()方法将jQuery集合转成普通数组。

2. 关于ul的id是否会变化 #

你使用的是jQuery UI Autocomplete组件，ui-id-xxx格式的id属于组件动态生成的临时id，每次页面刷新、组件重新初始化时都会自动变化，绝对不能写死id作为选择器使用，否则后续一定会失效。

3. 输入框与下拉ul的关联逻辑 #

jQuery UI Autocomplete组件本身就会自动绑定输入框和对应生成的下拉ul，每个初始化了autocomplete的输入框，都可以直接调用autocomplete('widget')方法获取到属于它的下拉ul元素，不需要手动通过id、class匹配，天然就能过滤其他无关的ul节点。

4. 多ul场景下的过滤优化方案 #

结合你现有的输入框获取逻辑，直接从目标输入框关联对应的ul提取数据即可，不会拿到其他冗余值：

// 先获取城市输入框实例
const $cityInput = $("[name=" + City.GetInputName() + "]");
// 从输入框关联的下拉组件提取城市数组
const cityArr = $cityInput.autocomplete("widget").find('li.ui-menu-item').map(function() {
  return $(this).text().trim();
}).get();

如果需要在输入框keyup时实时获取数组，直接整合到你的事件回调即可：

$("[name=" + City.GetInputName() + "]").keyup(function(eventObject){
  const cityArr = $(this).autocomplete("widget").find('li.ui-menu-item').map(function() {
    return $(this).text().trim();
  }).get();
  // 你自己的业务逻辑，比如给Source输入框赋值
  $("[name=" + Source.GetInputName() + "]").val(/* 你的处理逻辑 */);
});

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