Javascript与jQuery操作<select/>

操作HTML Select元素

最新推荐文章于 2024-10-22 18:46:48 发布

原创最新推荐文章于 2024-10-22 18:46:48 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Javascript #select #ViewUI

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用JavaScript和jQuery操作HTML中的Select元素，包括获取选中项的文本与值、选中指定项、增加和删除选项等实用技巧。

HTML中<select/>元素如下：

<select id="select">
    <option value="opt1">Option1</option>
    <option value="opt2">Option2</option>
    <option value="opt3">Option3</option>
</select>

1. 获取选中向项的文本与值：

var selectEle = document.getElementById("select");
var selectedOption = selectEle.options[selectEle.selectedIndex];
var selectedText = selectedOption.text;
var selectedVal = selectedOption.value;

或者使用jQuery

var $selectedOpt = $("#select").find("option:selected");
var selectedText = $selectedOpt.text();
var selectedVal = $selectedOpt.val();

2.选中某一项（3种方式）

//1.设置选项的selected属性选中
var selectEle = document.getElementById("select");
selectEle.options[2].selected = true;

//2.通过select元素的selectedIndex属性选中
document.getElementById("select").selectedIndex = 2;

//3.通过设置select元素的值匹配选项
document.getElementById("select").value = "opt3";

或者使用jQuery

//1.设置选项的selected属性选中
$("#select option[value='opt3']").attr("selected", true);

//2.通过设置select元素的值匹配选项
$("#select").val("opt3");

3.增加一个选项

var selectEle = document.getElementById("select");
var newOpt = new Option("Option4", "opt4");
selectEle.options.add(newOpt);

或者使用jQuery

var $newOpt = $("<option value='opt4'>Option4</option>");
$("#select").append($newOpt);

4.删除一个选项

var selectEle = document.getElementById("select");
selectEle.options.remove(selectEle.selectedIndex);

或者使用jQuery

$("#select option:selected").remove();

5.清空所有选项

document.getElementById("select").options.length = 0;

或者使用jQuery

$("#select").empty();