jquery 对select的操作

最新推荐文章于 2025-06-22 15:42:23 发布

原创最新推荐文章于 2025-06-22 15:42:23 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#select

web前端专栏收录该内容

46 篇文章

订阅专栏

本文介绍如何使用JavaScript直接操作HTML中的Select元素，包括创建、删除Option选项及获取选中值的方法。此外，还提供了jQuery简化操作的例子。

如题。

使用js直接操作select。一般会使用到下面的几个命令：

var tmp = document.getElementById("select");
//创建option方法1
var tmpOp = document.createElementByTagName("option");
tmp.value = "1"
tmp.appendChild(tmpOp);
//创建option方法2
tmp.add(option的文字，要插在之前的selectedIndex)
//创建option方法3
tmp.innerHTML="<option value='0'>POLO</option"

//删除option方法1
tmp.removeChild(tmpOp);
//删除option方法2
tmp.remove(index);
//删除option方法3
tmp.innerHTML="";
//获取当前选中的option的index;
var selectNum = tmp.selectedIndex ;

当用户修改了select中的选中值时，此时可以使用onchange()这个函数来执行相应的行为。在解决几个select的级联问题时会需要这个知识。同时，如果你想让你的option在初始化的时候默认选中哪个，就在那个option标签中添加一个selected="selected".

从Jquery中来说，有更加方便的解决方法：

//清除掉整个select中的option
 jQuery("#select").empty();
//向select中添加option
  jQuery("#series").append("<option value='0'>POLO</option>");