javascript获取select值的方法完整实例

关于JavaScript获取Select的值，你可以按照下面的步骤实现：

第一步：获取Select元素

要获取Select元素，可以使用document.getElementById()方法，传入Select元素的ID作为参数，如下所示：

let select = document.getElementById("mySelect");

第二步：获取被选中的Option元素

要获取被选中的Option元素，可以使用Select元素的selectedIndex属性获取被选中的索引，然后在利用options属性获取Option元素的数组。例如：

let index = select.selectedIndex;  //获取被选中的索引
let option = select.options[index];  //获取被选中的Option元素

第三步：获取Option元素的值

要获取Option元素的值，可以使用value属性获取，例如：

let selectedValue = option.value;  //获取被选中的Option元素的值

示例说明1

HTML代码：

<select id="mySelect">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="watermelon">西瓜</option>
</select>

JavaScript代码：

let select = document.getElementById("mySelect");
let index = select.selectedIndex;
let option = select.options[index];
let selectedValue = option.value;
console.log(selectedValue);

输出结果：

apple

示例说明2

HTML代码：

<select id="mySelect">
  <option value="red">红色</option>
  <option value="green">绿色</option>
  <option value="blue">蓝色</option>
</select>

JavaScript代码：

let select = document.getElementById("mySelect");
let index = select.selectedIndex;
let option = select.options[index];
let selectedValue = option.value;
if(selectedValue === "red"){
  console.log("您选择的颜色是红色");
}else if(selectedValue === "green"){
  console.log("您选择的颜色是绿色");
}else if(selectedValue === "blue"){
  console.log("您选择的颜色是蓝色");
}

输出结果：

您选择的颜色是红色