JavaScript操作HTML下拉列表(select)常用方法详解

作者：竹影时间：2026-10-29 14:02:50浏览：266

本文详细讲解如何使用JavaScript对HTML下拉列表(select)进行增、删、改、查及选中状态设置。通过封装常用函数，实现判断选项是否存在、动态添加与删除选项、修改选项文本、获取当前选中项的值与索引以及清空列表等功能，帮助开发者高效处理表单交互。

JavaScript操作Select下拉列表概述

本文将介绍JavaScript操作HTML下拉列表（select标签）的具体实现思路与代码示例。

判断选项是否存在

首先需要判断select元素的options列表中，是否存在value属性等于指定值objItemValue的选项。

添加新选项

接下来演示如何向select元素的options列表中添加一个新的选项，该选项包含指定的文本objItemText和值objItemValue。

删除指定选项

然后介绍如何从select元素的options列表中移除value属性等于指定值objItemValue的特定选项。

删除选中项

随后讲解如何删除select元素中当前被选中的选项。

修改选项文本

接着说明如何修改select元素中value属性等于objItemValue的选项，将其文本内容更新为objItemText。

按文本设置选中

之后介绍如何设置select元素中text属性等于objItemText的第一个选项为当前选中状态。

按值设置选中

再讲解如何设置select元素中value属性等于objItemValue的选项为当前选中状态。

获取选中项Value

然后演示如何获取select元素当前选中选项的value属性值。

获取选中项Text

接着介绍如何获取select元素当前选中选项的text文本内容。

获取选中项Index

随后讲解如何获取select元素当前选中选项的索引值（Index）。

清空所有选项

最后说明如何清空select元素中的所有选项。

完整代码实现

以下是实现上述功能的具体JavaScript代码示例。

// 1.判断select选项中是否存在Value="paraValue"的Item


function jsSelectIsExitItem(objSelect, objItemValue) {    
  var isExit =false;    
  for (var i =0; i < objSelect.options.length; i++) {    
    if (objSelect.options[i].value == objItemValue) {    
      isExit =true;    
      break;    
    }    
  }    
  return isExit;    
}

// 2.向select选项中加入一个Item


function jsAddItemToSelect(objSelect, objItemText, objItemValue) {    
  //判断是否存在    
  if (jsSelectIsExitItem(objSelect, objItemValue)) {    
    alert("该Item的Value值已经存在");    
  }else{    
    var varItem =new Option(objItemText, objItemValue);   
    objSelect.options.add(varItem);   
    alert("成功加入");   
  }    
}

// 3.从select选项中删除一个Item


function jsRemoveItemFromSelect(objSelect, objItemValue) {    
  //判断是否存在    
  if (jsSelectIsExitItem(objSelect, objItemValue)) {    
    for (var i =0; i < objSelect.options.length; i++) {    
      if (objSelect.options[i].value == objItemValue) {    
        objSelect.options.remove(i);    
        break;    
      }    
    }    
    alert("成功删除");    
  }else{    
    alert("该select中 不存在该项");    
  }    
}

// 4.删除select中选中的项


function jsRemoveSelectedItemFromSelect(objSelect) {    
  var length = objSelect.options.length -1;  
  for(var i = length; i >=0; i--){  
    if(objSelect[i].selected ==true){  
      objSelect.options[i] =null;  
    }  
  }  
}

// 5.修改select选项中 value="paraValue"的text为"paraText"


function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {    
  //判断是否存在    
  if (jsSelectIsExitItem(objSelect, objItemValue)) {    
    for (var i =0; i < objSelect.options.length; i++) {    
      if (objSelect.options[i].value == objItemValue) {    
        objSelect.options[i].text = objItemText;    
        break;    
      }    
    }    
    alert("成功修改");    
  }else{    
    alert("该select中 不存在该项");    
  }    
}

// 6.设置select中text="paraText"的第一个Item为选中


function jsSelectItemByValue(objSelect, objItemText) {      
  //判断是否存在    
  var isExit =false;    
  for (var i =0; i < objSelect.options.length; i++) {    
    if (objSelect.options[i].text == objItemText) {    
      objSelect.options[i].selected =true;    
      isExit =true;    
      break;    
    }    
  }       
  //Show出结果    
  if (isExit) {    
    alert("成功选中");    
  }else{    
    alert("该select中 不存在该项");    
  }    
}

// 7.设置select中value="paraValue"的Item为选中


document.all.objSelect.value = objItemValue;

// 8.得到select的当前选中项的value


var currSelectValue = document.all.objSelect.value;

// 9.得到select的当前选中项的text


var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

// 10.得到select的当前选中项的Index


var currSelectIndex = document.all.objSelect.selectedIndex;

// 11.清空select的项


document.all.objSelect.options.length =0;

以上内容介绍了javascript操作html下拉列表标签的方法，希望大家喜欢本文所述。

作者最新文章

JS怎么使用classList添加、删除和切换class

2026-11-05 17:26:02

网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作

2026-11-05 12:51:22

JS解析URL参数时怎么处理中文乱码和特殊字符

2026-11-05 12:47:23

js-cookie 存储 JSON 对象：自动序列化与反序列化技巧

2026-11-05 12:36:26

marked.js 快速上手：安装与基础 Markdown 转 HTML 示例

2026-11-05 09:32:53