如何使用JQuery按索引设置指定下拉框的选中值

嘿，我来帮你搞定这个问题！你的下拉框有两个容易踩坑的点：它是display:none隐藏状态，而且内部还嵌套了一个不符合HTML规范的input标签（select的合法子元素只能是option或optgroup），这大概率是你之前操作失败的原因。

试试下面的步骤：

• 直接定位到目标option，通过索引设置它的选中状态：

  // 索引1对应的就是"New York"的option（第一个option索引是0）
  $('#ddlCity option').eq(1).prop('selected', true);
  

• 如果你的业务逻辑需要触发下拉框的change事件（比如联动其他控件），可以在后面加上触发代码：

  $('#ddlCity option').eq(1).prop('selected', true).trigger('change');
  

为什么之前的操作可能没效果？ #

1. 隐藏元素的兼容性问题：部分浏览器对display:none的表单元素处理有差异，常规的$('#ddlCity').val('1234')虽然能设置值，但如果是通过索引操作，得确保精准选中option，别被内部的input干扰。
2. 非法嵌套的input干扰：你在select里放了input，这不符合HTML规范，会导致JQuery在遍历select子元素时可能出错。所以我们直接用$('#ddlCity option')来筛选出所有合法的option元素，避开那个嵌套的input。

额外排查小技巧 #

如果你不确定索引是否正确，可以先打印所有option的信息确认：

$('#ddlCity option').each(function(index) {
  console.log(`索引${index}: ${$(this).text()}`);
});

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