JS动态添加option和删除option

1.动态创建select

function createSelect(){
    var mySelect = document.createElement("select");
    mySelect.id = "mySelect";
    document.body.appendChild(mySelect);
}

2.添加选项option

function addOption(){
    //根据id查找对象,
    var obj=document.getElementById(‘mySelect‘);
    //添加一个选项
    obj.add(new Option("文本","值")); //这个只能在IE中有效
    obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}

3.删除所有选项option

function removeAll(){
    var obj=document.getElementById(‘mySelect‘);
    obj.options.length=0;
}

4.删除一个选项option

function removeOne(){
    var obj=document.getElementById(‘mySelect‘);
    //index,要删除选项的序号,这里取当前选中选项的序号
    var index=obj.selectedIndex;
    obj.options.remove(index);
}

5.获得选项option的值

var obj=document.getElementById(‘mySelect‘);
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;

6.获得选项option的文本

var obj=document.getElementById(‘mySelect‘);
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;

7.修改选项option

var obj=document.getElementById(‘mySelect‘);
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");

8.删除select

function removeSelect(){
    var mySelect = document.getElementById("mySelect");
    mySelect.parentNode.removeChild(mySelect);
}

  

时间: 2024-10-26 05:34:29

JS动态添加option和删除option的相关文章

JS动态添加到下拉列表数据

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS动态添加删除表格数据</title></head><body><script type="text/javascript"> function f() { var provinceName=docume

js动态添加file控件

<html></head><script language="javascript" type="text/ecmascript">//======================//功能:在表单中input file控件//参数:parentID---要插入input file控件的父元素ID// inputID----input file控件的ID//======================function createI

【原生js】js动态添加dom,如何绑定事件

首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完dom以后立即执行一次函数A即可. 需要注意的是,在你可能同事需要添加许多的dom,不要添加一个就执行一次函数A,这样会增加浏览器的负载,你需要在所有dom添加完以后在执行函数A,例如你用一个for循环遍历dom组合并拼接成一个字符串,然后添加到某个父级dom里面,这个时候你需要在循环外添加一次就可以

04JS高级动态添加属性和删除属性

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type ="text/javascrip

每天都有新发现——如何优雅的用js动态添加html代码

body { font-family: 微软雅黑,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5; } html, body { } h1 { font-size:1.5em; font-weight:bold; } h2 { font-size:1.4em; font-weight:bold; } h3 { fon

form表单 无法提交js动态添加的表单元素问题。。

第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url  "> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </form> &l

MUI 里js动态添加数字输入框后,增加、减少按钮无效

numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输入框,需要 mui('#abc').numbox() 初始化一下. 为什么 test() 放在 mui.plusReady 外边可以,而放在里边就不可以?这是因为 numbox 的自动初化是在 mui.ready 时完成的,直接在外部的 test() 执行发生在 mui.ready 之前,而写在 m

JS动态改变select选择变更option的index值

document.getElementById("louyuming").options[0].selected=true; function jsSelectIsExitItem(objSelect, objItemValue) {             var isExit = false;             for (var i = 0; i < objSelect.options.length; i++) {                 if (objSele

js动态添加和删除标签

html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead><tr><th>姓名</th><th>年薪</th><th>操作</th></tr></thead> <tbody id="info"> </tbody>

利用jquery给指定的table动态添加一行、删除一行

$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,如