如何根据索引为select选项设置值或选中对应选项

嘿，我来帮你搞定这两个和select元素相关的问题，结合你给出的示例代码一步步说明：

一、根据索引值选中Select选项 #

select元素自带的selectedIndex属性就是干这个的！它直接控制当前选中选项的索引（注意：索引是从0开始计数的）。

看你的示例代码，各个选项的索引对应关系是：

• 索引 0：默认的隐藏占位选项（value="a"）
• 索引 1：Normal选项（value="1"）
• 索引 2：Large选项（value="2"）

用JavaScript实现选中指定索引的选项很简单：

// 获取目标select元素
const sizeSelect = document.getElementById('size');

// 选中索引为1的选项（也就是"Normal"）
sizeSelect.selectedIndex = 1;

// 如果要选"Large"，就设置为2
// sizeSelect.selectedIndex = 2;

设置后，对应索引的选项会自动变成选中状态，原有的选中状态会被覆盖。

二、根据索引值为Select选项设置值 #

如果是要修改某个索引对应的option的value属性，可以通过select的options集合访问到目标选项，再直接修改它的value属性。

比如，把索引1的Normal选项的value改成"normal-size"：

const sizeSelect = document.getElementById('size');

// 拿到索引为1的option元素
const targetOption = sizeSelect.options[1];

// 修改它的value值
targetOption.value = "normal-size";

// 可以验证一下修改结果
console.log(targetOption.value); // 输出 "normal-size"

小提醒 #

• 操作前要确保索引在有效范围内：比如你的示例里总共有3个选项，所以合法索引是0、1、2，超出这个范围会导致报错或者无效操作。
• 如果是想同时修改选项的显示文本，还可以修改targetOption.textContent，比如targetOption.textContent = "常规尺寸"。

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