如何以编程方式设置jQuery UI Combobox的选中值？

核心原因 #

jQuery UI的Combobox是基于Autocomplete封装的组件，它会隐藏原生<select>元素，生成独立的输入框和动态下拉菜单。直接修改原生option的选中状态只会同步到隐藏的select，不会更新组件UI；而动态生成的菜单元素ID是随机的，无法通过固定ID定位。

可行解决方案 #

方法1：模拟用户选择（推荐）

通过组件的Autocomplete实例触发搜索，再匹配文本定位菜单项并触发点击：

// 获取Combobox对应的Autocomplete输入框和实例
var $comboboxInput = $("#locations").next(".ui-autocomplete-input");
var autocomplete = $comboboxInput.data("ui-autocomplete");

// 目标选项的文本（或通过value获取文本）
var targetText = $("#locations option[value='050']").text();

// 触发搜索生成下拉菜单（若未生成）
autocomplete.search(targetText);
// 匹配菜单项并触发点击完成选中
$(".ui-menu-item-wrapper:contains('" + targetText + "')").trigger("click");

方法2：直接调用组件内部方法

利用Autocomplete的_select方法，直接传入目标选项数据：

var $comboboxInput = $("#locations").next(".ui-autocomplete-input");
var autocomplete = $comboboxInput.data("ui-autocomplete");

// 构造目标项数据（value对应原生option的value，label对应显示文本）
var targetItem = {
  value: "050",
  label: $("#locations option[value='050']").text()
};

// 调用组件的选中逻辑
autocomplete._select(null, { item: targetItem });

方法3：同步原生select与组件UI

手动更新原生select选中状态，再同步组件输入框并触发事件：

var targetOption = $("#locations option[value='050']");
var targetText = targetOption.text();

// 同步原生select选中状态
targetOption.prop("selected", true);
// 更新组件输入框文本
$("#locations").next(".ui-autocomplete-input").val(targetText);
// 触发change事件让组件同步状态
$("#locations").trigger("change");

注意事项 #

• 如果页面存在多个Combobox，需更精准地定位菜单（比如通过输入框的父容器限制选择范围），避免误操作其他组件：

  $comboboxInput.siblings(".ui-autocomplete").find(".ui-menu-item-wrapper:contains('" + targetText + "')").trigger("click");
  

• 若选项文本存在重复，建议通过原生option的索引或唯一标识来定位，避免匹配错误。

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