javascript对select标签的控制(option选项/select)

下面是 JavaScript 对 Select 标签的控制的完整攻略。

1、选项控制

可以使用 JavaScript 来控制 Select 标签的选中项，以及增加、修改、删除选项等操作。

1.1 获取 Select 元素

可以通过 document.getElementById() 或者 document.querySelector() 等方法获取 Select 元素：

// 通过 id 获取 Select 元素
const select = document.getElementById("select");

// 或者通过 css 选择器获取 Select 元素
const select = document.querySelector("#select");

1.2 选中项操作

可以通过 select.selectedIndex 属性来获取当前选中项的索引，通过设置该属性来改变选中项：

// 获取当前选中项的索引
const selectedIndex = select.selectedIndex;

// 设置选中项为第二个选项
select.selectedIndex = 1;

1.3 选项操作

可以通过 select.options 属性来获取 Select 元素的所有选项，同时可以使用 add()、remove()、insert() 等方法来增加、删除、修改选项：

// 获取所有选项
const options = select.options;

// 添加一个新选项
options.add(new Option("新选项", "value"));

// 删除第一个选项
options.remove(0);

// 在第二个选项后插入一个选项
options.insert(new Option("插入选项", "value"), 2);

2、Select 事件监听

可以使用 select.onchange 属性来监听 Select 元素的选中项改变事件，也可以使用 addEventListener() 方法来添加事件监听器：

// 使用 onchange 属性监听事件
select.onchange = function(event) {
  // 当选项改变时触发的回调函数
};

// 使用 addEventListener() 方法添加事件监听器
select.addEventListener("change", function(event) {
  // 当选项改变时触发的回调函数
});

示例说明：

示例一：动态改变 Select 选中项

<select id="select">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

<button onclick="changeSelected()">改变选中项</button>

<script>
function changeSelected() {
  // 获取 Select 元素
  const select = document.getElementById("select");

  // 将选中项改为第二个选项
  select.selectedIndex = 1;
}
</script>

点击按钮后，会将 Select 元素的选中项改为第二个选项。

示例二：添加新选项

<select id="select">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

<button onclick="addOption()">添加新选项</button>

<script>
function addOption() {
  // 获取 Select 元素
  const select = document.getElementById("select");

  // 获取所有选项
  const options = select.options;

  // 添加一个新选项
  options.add(new Option("新选项", "4"));
}
</script>

点击按钮后，会在 Select 元素的末尾添加一个新选项。