javascript对select标签的控制,使用js对select动态添
分类:前端技术

表单成分之下拉系

2016/01/19 · HTML5 · 表单

原稿出处: 司徒正美(@司徒正美卡塔尔   

那边特指下拉框,select。但select有两种造型,由multiple属性决定。在多选形态下,客商按住shift键就会兑现多选,但用得非常少,首假诺占空间。那我们重视说说单选形态及其组织。

下拉框是由四种成分构成,经常大家见过select套着option成分,那中档还能够夹风姿罗曼蒂克层,optgroup正是对option成分举办分组。option元素里面不能够放置任何因素秋点,option成分间除了空白或注释节点,也不能废弃王大帅西。

optgroup只是装饰用,对交付数据尚未影响,当大家选中有个别option成分时,它的selected属性就成为true,以前被入选的因素的selected属性产生false,select成分中selectedIndex的值会形成被选成分的序号(它在全体option成分的位置卡塔 尔(英语:State of Qatar)。别的,还会有二个无人问津的质量selectedOptions,它是对应一个数组,装着被入选的因素,那么它就换到被选桐月素。因而DOM操作是后生可畏种非常复杂与高消耗的行事,那形成基于设想DOM的react库的一败涂地。裁减无需的DOM操作,就能够小幅度提升质量。

select的值就是被入选的option成分的值,借使客户定义value属性,那么那值就是option.value,否则就是option的innerHTML,相当于option.text。那中间存在包容难题,举例部分浏览器会对innerHTML举行两端空白trim操作,有的不会,提议统一运用trim操作。

XHTML

<select name="aaa"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

1
2
3
4
5
6
<select name="aaa">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

option.value的提取方法如下:

JavaScript

//by 司徒正美 var roption = /^<option(?:s w (?:s*=s*(?:"[^"]*"|'[^']*'|[^s>] ))?)*s value[s=]/i var valHooks = { "option:get": IEVersion ? function (node) { //在IE11及W3C,若无一点点名value,那么node.value默感到node.text(存在trim作卡塔尔,但IE9-10则是取innerHTML(没trim操作) //specified并不保障,由此通过深入分析outerHTML判断客商有未有显示定义value return roption.test(node.outerHTML) ? node.value : node.text.trim() } : function (node) { return node.value } }

1
2
3
4
5
6
7
8
9
10
11
//by 司徒正美
var roption = /^<option(?:s w (?:s*=s*(?:"[^"]*"|'[^']*'|[^s>] ))?)*s value[s=]/i
var valHooks = {
    "option:get": IEVersion ? function (node) {
        //在IE11及W3C,如果没有指定value,那么node.value默认为node.text(存在trim作),但IE9-10则是取innerHTML(没trim操作)
        //specified并不可靠,因此通过分析outerHTML判定用户有没有显示定义value
        return roption.test(node.outerHTML) ? node.value : node.text.trim()
    } : function (node) {
        return node.value
    }
}

笔者们在探视如何动态增加option元素。那有二种情势,1是利用W3C的createElement与appendChild,2是选取new Option及options.add方法。

1.动态创立select

html中的select标签,也是asp.net中的asp:DropDownList控件。
javascript对它们的操作
黄金年代、底子掌握

<select id="ddlResourceType" onchange="getvalue(this)"> </select>
动态删除select中的全部options:
document.getElementById("ddlResourceType").options.length=0;
动态删除select中的某生机勃勃项option:
document.getElementById("ddlResourceType").options.remove(indx);
动态增添select中的项option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
下边在IE和FireFox都能测验成功,希望今后您能够用上。
实际上用规范的DOM操作也足以,就是document.createElement,appendChild,removeChild之类的。
取值方面

1. 一贯运用select.innerHTML

//by 司徒正美 select.innerHTML = '';

1
2
//by 司徒正美
    select.innerHTML = '';

运作开采标准浏览器如chrome, firefox运转寻常,DOM树为

图片 1

IE(678)全家都呵呵了:

图片 2

缘由在于IE使用innerHTML给select赋值时会依据/^&/(尖括号中间的字母、数字,引号,空格)相称的字符都干掉,无力嘲讽。

      function createSelect(){

复制代码 代码如下:

复制代码 代码如下:

2. 选用new Option创立select的options,那是相比推荐的法子。

大家先来探视Option构造器是怎么用的

//by 司徒正美 new option(text,value,defaultSelected,selected) /* text:字符串,钦命option对象的text属性(即之间的文字) value:字符串,钦命option对象的value属性 defaultSelected:布尔值,内定option对象的defaultSelected属性 重临上边selected的暗中同意值 selected:布尔值,钦点option对象的selected属性 ture/false 是不是选择 */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//by 司徒正美
 
new option(text,value,defaultSelected,selected)
/*
text:字符串,指定option对象的text属性(即之间的文字)
 
value:字符串,指定option对象的value属性
 
defaultSelected:布尔值,指定option对象的defaultSelected属性   返回下面selected的默认值
 
selected:布尔值,指定option对象的selected属性  ture/false  是否选择
 
http://www.cnblogs.com/SpringSmallGrass/archive/2013/04/14/3019837.html
*/

除却第贰个参数,别的皆以可选的,相当于

//by 司徒正美 var option = document.createElement("option") option.text = "xxxx" option.value = "aaa" option.selected = true

1
2
3
4
5
//by 司徒正美
   var option =  document.createElement("option")
  option.text = "xxxx"
  option.value = "aaa"
  option.selected = true

再看options.add方法。options是select成分的一个数组属性,里面装着全体option成分。add是其上边的多个艺术( IE中它也能冒出在select成分上),此形式存在宽容难点。

var objSelect = document.getElementById('mySelect'); //增加一个筛选objSelect.add(new Option("文本","值")); //那些只可以在IE中有效 objSelect.options.add(new Option("text","value")); //这些宽容IE与firefox

1
2
3
4
var objSelect = document.getElementById('mySelect');
//添加一个选项
objSelect.add(new Option("文本","值")); //这个只能在IE中有效
objSelect.options.add(new Option("text","value")); //这个兼容IE与firefox

options.add有三种传参格局,第生龙活虎种要来传入多个因素,第贰个是新option成分,第三个是已有些option成分,新成分会插入到旧元素在此之前。难题现身在第二个参数缺省的情事下:

objSelect.add(new Option("Label", "Value"), null);

1
objSelect.add(new Option("Label", "Value"), null);

请小心,在IE6及IE7下请使用不带null参数的add方法,在FF下请使用带null参数的措施,IE8下带不带都能够。
很古怪为啥必要求加null,笔者猜度add方法里肯定使用了’=== null’来判断第二的参数或许还未对参数数组的尺寸做验证。

再有生龙活虎种传参方法,第一个是新option成分,第四个是插入地点,不写暗许插入到最终。

objSelect.add( new Option(txt, val)); //加在最后 objSelect.add( new Option(txt, val),0);//加在起头

1
2
objSelect.add( new Option(txt, val)); //加在末尾
objSelect.add( new Option(txt, val),0);//加在开头

初期IE是不协理传入七个要素,只帮助传入成分与插入地点的艺术。IE8是三种办法都帮衬,对于普通浏览器,要是传入的是索引数值,它不会认为是失误,仍旧会增添在最终。

JavaScript

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> //try{先实行的代码} catch(err){出错开上下班时间实行的代码} //select的add方法,第一个参数是内需被加上的option成分,第三个参数决定了被加上的岗位 //普通浏览器中,第一个参数是八个既有的option对象,增加的option成分被插入到它在此之前. //ie7浏览器中,第一个参数是一个目录,表示第n个既有的option对象. //ie8以上版本,传入三种对象它都能识别. //若无第叁个参数,则插入在终极. //对于平淡无奇浏览器,如果传入的是索引数值,它不会认为是失误,依旧会增多在最终,所以,使用try{}catch{}方法化解这几个难题,必需把常备浏览器的适用方法放在try里面. window.onload = function () { var select = document.getElementById("select") var btn = document.getElementById("btn") btn.onclick = function () { //通过下标能够把jquery对象转变为javascript对象 try { //普通浏览器和ie8以上版本实行以下代码 select.add(new Option('2.5'), select.options[2]) } catch (err) { //ie7施行以下代码 select.add(new Option('2.5'), 2) } } } </script> </head> <body> <select id="select" multiple="multiple" size="5"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> </select> <div> <button type="button" id="btn">Click me!</button> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
            //try{先执行的代码} catch(err){出错时执行的代码}
            //select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置
            //普通浏览器中,第二个参数是一个既有的option对象,添加的option元素被插入到它之前.
            //ie7浏览器中,第二个参数是一个索引,表示第n个既有的option对象.
            //ie8以上版本,传入两种对象它都能识别.
            //如果没有第二个参数,则插入在最后.
            //对于普通浏览器,如果传入的是索引数值,它不会认为是出错,还是会添加在最后,所以,使用try{}catch{}方法解决这个问题,必须把普通浏览器的适用方法放在try里面.
            window.onload = function () {
                var select = document.getElementById("select")
                var btn = document.getElementById("btn")
                btn.onclick = function () {
                    //通过下标可以把jquery对象转换为javascript对象
                    try {    //普通浏览器和ie8以上版本执行以下代码
                        select.add(new Option('2.5'), select.options[2])
                    } catch (err) {   //ie7执行以下代码
                        select.add(new Option('2.5'), 2)
                    }
                }
            }
        </script>
    </head>
 
    <body>
        <select id="select" multiple="multiple" size="5">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
        <div>
            <button type="button" id="btn">Click me!</button>
        </div>
    </body>
</html>

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

var e = document.getElementById("selectId");
e. options= new Option("文本","值") ;
//创造二个option对象,即在<select>标签中创建贰个或八个<option value="值">文本</option>
//options是个数组,里面能够贮存多少个<option value="值">文本</option>这样的价签

function getvalue(obj)
{
var m=obj.options[obj.selectedIndex].value
alert(m);//获取value
var n=obj.options[obj.selectedIndex].text
alert(n);//获取文本
}

3. 使用document.createElement与appendChild。

那是规范DOM API,基本上手眼通天。 在原先的IE4中, document只可以制造img, area, option三种成分,到了IE5,常常能够编制程序创设差相当少所以成分, 除了frame和iframe。 况兼这个新的始建的成分的属性都以可读写的,並且能够编制程序随便拜会。可是你不得不得先把他们先回到他们相应的集合中还是当前文书档案中您技艺使用, 不然会报错。

看下叁个课题,怎么样找到能够提交的option成分。因为决定三个option能还是不能够提交,除了selected属性外,还应该有disabled属性,由于disabled属性大概出今后select或optgroup成分上,那标题就复杂了。别的selectedOptions数组属性并不保证,不是有所浏览器都扶持。jQuery在拍卖这里也花了成都百货上千代码。

JavaScript

var valHooks = { "option:get": function (node) { // 见上 }, "select:get": function (node, value) { var option, options = node.options, index = node.selectedIndex, getter = valHooks["option:get"], one = node.type === "select-one" || index < 0, values = one ? null : [], max = one ? index 1 : options.length, i = index < 0 ? max : one ? index : 0 for (; i < max; i ) { option = options[i] //IE6-9在reset后不会转移selected,必要改用i === index判别//大家过滤全数disabled的option成分,但在safari5下, //假诺设置optgroup为disable,那么其颇负子女都disable //因而当多少个成分为disable,必要检查测验其是不是显式设置了disable及其父节点的disable景况if ((option.selected || i === index) && !option.disabled && (!option.parentNode.disabled || option.parentNode.tagName !== "OPTGROUP") ) { value = getter(option) if (one) { return value } //采撷全部selected值组成数组再次回到 values.push(value) } } return values } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var valHooks = {
    "option:get":  function (node) {
        // 见上
    },
    "select:get": function (node, value) {
        var option, options = node.options,
                index = node.selectedIndex,
                getter = valHooks["option:get"],
                one = node.type === "select-one" || index < 0,
                values = one ? null : [],
                max = one ? index 1 : options.length,
                i = index < 0 ? max : one ? index : 0
        for (; i < max; i ) {
            option = options[i]
            //IE6-9在reset后不会改变selected,需要改用i === index判定
            //我们过滤所有disabled的option元素,但在safari5下,
            //如果设置optgroup为disable,那么其所有孩子都disable
            //因此当一个元素为disable,需要检测其是否显式设置了disable及其父节点的disable情况
            if ((option.selected || i === index) && !option.disabled
                    && (!option.parentNode.disabled || option.parentNode.tagName !== "OPTGROUP")
                    ) {
                value = getter(option)
                if (one) {
                    return value
                }
                //收集所有selected值组成数组返回
                values.push(value)
            }
        }
        return values
    }
}

option还恐怕有多少个至关心注重要的属性,index是再次回到当前option元素在这select下全体option元素的位置。label是体现其文件,行为有一点点像text,优化级比text高,但稍事包容性难题。

JavaScript

<select id="test"> <option label="Label1">TextContent1</option> <option label="Label2">TextContent2</option> </select>

1
2
3
4
<select id="test">
   <option label="Label1">TextContent1</option>
   <option label="Label2">TextContent2</option>
</select>

管见所及状态下,IE,opera,safari是呈现Label1与Label2,而chrome, firefox(即便是4.01的本子)是展现TextContent1与TextContent2,这几个古老的bug(见这里卡塔 尔(英语:State of Qatar)于今没修复。

1 赞 5 收藏 评论

图片 3

2.增多选项option

1:options[ ]数组的属性:
length属性---------长度属性
selectedIndex属性--------当前被入选的框中的文件的索引值,此索引值是内部存款和储蓄器自动分配的(0,1,2,3.....)对应(首个文本值,第一个文本值,第多少个文本值,第多少个公文值..........)
2:单个option的属性(---obj.options[obj.selecedIndex]是点名的某些<option>标签,是贰个---)
text属性---------返回/指定 文本
value属性------返回/指定 值,与<options value="...">一致。
index属性-------重临下标,
selected 属性-------重回/钦命该对象是还是不是被选中.通过点名 true 或然false,能够动态的转移选中项
defaultSelected 属性-----重回该对象暗中认可是或不是被选中。true / false。
3:option的方法
扩张一个<option>标签-----obj.options.add(new("文本","值"));<增>
去除一个<option>标签-----obj.options.remove(obj.selectedIndex)<删>
收获三个<option>标签的文件-----obj.options[obj.selectedIndex].text<查>
更改叁个<option>标签的值-----obj.options[obj.selectedIndex]=new Option("新文本","新值")<改>
剔除全体<option>标签-----obj.options.length = 0
获得一个<option>标签的值-----obj.options[obj.selectedIndex].value
注意:
a:上面包车型地铁写的是如这样类型的秘籍obj.options.function()而不写obj.funciton,是因为为了构思在IE和FF 下的极度,如obj.add()只好在IE中有效.
b:obj.option中的option无需大写,new Option中的Option必要大写
二 、应用

=======================================
1 检验是还是不是有入选

     function addOption(){

复制代码 代码如下:

复制代码 代码如下:

          //依照id查找对象,
           var obj=document.getElementById('mySelect');

<html>
<head>
<script language="javascript">
function number(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("小编的吃吃","4");//在脚下入选的可怜的值中改造
//obj.options.add(new Option("小编的吃吃","4"));再加多八个option
//alert(obj.selectedIndex);//彰显序号,option本人安装的
//obj.options[obj.selectedIndex].text = "小编的吃吃";改良值
//obj.remove(obj.selectedIndex);删除效用
}
</script>
</head>
<body>
<select id="mySelect">
<option>小编的手提袋</option>
<option>我的图书</option>
<option>作者的油油</option>
<option>作者的担子</option>
</select>
<input type="button" name="button" value="查看结果" onclick="number();">
</body>
</html>

if (objSelect.selectedIndex > - 1 ) {
// 表达选中
} else {
// 表明未有当选
}

           //增添二个增选
obj.add(new Option("文本","值"));    //这些只好在IE中有效
         obj.options.add(new Option("text","value")); //那些包容IE与firefox
     }

1.动态成立select

2 删除被入选的项
objSelect.options[objSelect.selectedIndex] = null ;
3 增加项
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );
4 改革所筛选中的项
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );
5 获得所采取项的文件
objSelect.options[objSelect.selectedIndex].text;
6 获得所选用处的值

3.剔除所有选项option

复制代码 代码如下:

objSelect.options[objSelect.selectedIndex].value;

复制代码 代码如下:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS对select动态增加options操作[IE和FireFox兼容]</title>
<script language="javascript" type="text/javascript">
function xlbchange(s){
switch (s){
case "1" :
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["精气神儿提炼","作风设计","目的设置","思想提高"];
for ( var i=0;i<soojs_value.length;i ){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "2" :
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3,4,5,6,7];
var soojs_text=["校徽","校训","校歌","校名字体","校史展室","宣传画集","宣传光盘","办公用品回想品"];
for ( var i=0;i<soojs_value.length;i ){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "3":
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2,3];
var soojs_text=["高校景象设计","校园摄影设计","学校浮雕设计","走道文化设计"];
for ( var i=0;i<soojs_value.length;i ){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
case "4":
document.getElementById("lb").options.length=0;
var soojs_value=[0,1,2];
var soojs_text=["高校制度","文化运动","行为标准"];
for ( var i=0;i<soojs_value.length;i ){
var oOption = document.createElement("OPTION");
oOption.value=soojs_value[i];
oOption.text=soojs_text[i];
zpmange.lb.options.add(oOption);
}
break;
default :
document.getElementById("lb").options.length=0;
var oOption = document.createElement("OPTION");
oOption.value=0;
oOption.text="请采用小说类型";
zpmange.lb.options.add(oOption);
}
}
</script>
</head>
<body>
<form action="zpmange.asp" name="zpmange" method="post">
<p><select id="ddlResourceType" onchange="getvalue(this)"><br />
</select></p>
<p> 动态删除select中的全部options: <br />
document.getElementById("ddlResourceType").options.length=0; <br />
<br />
动态删除select中的某大器晚成项option: <br />
document.getElementById("ddlResourceType").options.remove(indx); </p>
<p> 动态增加select中的项option: <br />
document.getElementById("ddlResourceType").options.add(new Option(text,value)); </p>
<p> 上边在IE和FireFox都能测量试验成功,希望现在你能够用上。 <br />
实际上用专门的学业的DOM操作也足以,即是document.createElement,appendChild,removeChild之类的。 </p>
<p>取值方面<br />
function getvalue(obj)<br />
{<br />
var m=obj.options[obj.selectedIndex].value<br />
alert(m);//获取value<br />
var n=obj.options[obj.selectedIndex].text<br />
alert(n);//获取文本<br />
}<br />
</p>
<p>例子:</p>
<table width="80%" border="0" align="center" cellpadding="1" cellspacing="1" style="border-style:double">
<tr>
<td width="50%" height="41" ><div align="center">
<select name="xt" id="xt" onchange="xlbchange(this.value)">
<option selected="selected">请选取文章系统</option>
<option value="1">思想视别系统</option>
<option value="2">视觉识别系统</option>
<option value="3">蒙受视别系统</option>
<option value="4">行为视别系统</option>
</select>
</div></td>
<td width="61%" ><div align="center">
<select name="lb" id="lb">
<option selected="selected">请选择文章类型</option>
</select>
</div></td>
</tr>
<tr>
<td height="203" colspan="2" > </td>
</tr>
</table>
</form>
</body>
</html>

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

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

您或然感兴趣的稿子:

  • JavaScript操作select成分和option的实例代码
  • javascript操作select成分实例解析
  • 获得select成分被入选的文件内容的js代码
  • js querySelector和getElementById通过id获取成分的界别
  • js获取当前select 成分值的代码
  • js 获取当前select成分值的代码
  • JavaScript Select和Option列表元素上下左右活动
  • extjs 列表框(multiselect)的动态增多列表项的法门
  • JS对HTML标签select的拿走、增加、删除操作
  • JavaScript落到实处将数组数据增加到Select下拉框的方法
  • JS动态增进与删除select中的Option对象(示例代码)
  • JS & JQuery 动态增进 select option
  • JavaScript得以达成向select下拉框中增多和删除成分的艺术

     }

2.增多选项option

4.删减叁个选项option

复制代码 代码如下:

function removeOne(){
           var obj=document.getElementById('mySelect');

function addOption(){
//依照id查找对象,
var obj=document.getElementById('mySelect');
//增多一个取舍
obj.add(new Option("文本","值")); //那几个只可以在IE中央银立竿见影
obj.options.add(new Option("text","value")); //这一个包容IE与firefox
}

           //index,要刨除选项的序号,这里取当前入选选项的序号

3.刨除全部选项option

var index=obj.selectedIndex;
obj.options.remove(index);

     }

复制代码 代码如下:

5.到手选项option的值

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

var obj=document.getElementById('mySelect');

4.剔除二个精选option

var index=obj.selectedIndex; //序号,取当前相中选项的序号

复制代码 代码如下:

var val = obj.options[index].value;

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

6.得到选项option的公文

5.收获选项option的值

var obj=document.getElementById('mySelect');

复制代码 代码如下:

var index=obj.selectedIndex; //序号,取当前当选选项的序号

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

var val = obj.options[index].text;

6.到手选项option的文本

7.修正式大选项option

复制代码 代码如下:

var obj=document.getElementById('mySelect');

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

var index=obj.selectedIndex; //序号,取当前相中选项的序号

7.更改选项option

var val = obj.options[index]=new Option("新文本","新值");

复制代码 代码如下:

8.删除select

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

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

8.删除select

漫天实例的完好代码如下:

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html">
<head>
   <script language=JavaScript>
    function $(id)
    {
     return document.getElementById(id)
    }
    function show()
    {
     var selectObj=$("area")
     var myOption=document.createElement("option")
     myOption.setAttribute("value","10")
     myOption.appendChild(document.createTextNode("上海"))
     var myOption1=document.createElement("option")
     myOption1.setAttribute("value","100")
     myOption1.appendChild(document.createTextNode("南京"))
     selectObj.appendChild(myOption)
     selectObj.appendChild(myOption1)
    }
    function choice()
    {
     var index=$("area").selectedIndex;
     var val=$("area").options[index].getAttribute("value")
     if(val==10)
     {
      var i=$("context").childNodes.length-1;
     var remobj=$("context").childNodes[i];
     remobj.removeNode(true)
      var sh=document.createElement("select")
      sh.add(new Option("浦东新区","101"))
      sh.add(new Option("黄浦区","102"))
      sh.add(new Option("徐汇区","103"))
      sh.add(new Option("普陀区","104"))
      $("context").appendChild(sh)
     }
     if(val==100)
     {
      var i=$("context").childNodes.length-1;
     var remobj=$("context").childNodes[i];
     remobj.removeNode(true)
      var nj=document.createElement("select")
      nj.add(new Option("玄武区","201"))
      nj.add(new Option("白下区","202"))
      nj.add(new Option("下关区","203"))
      nj.add(new Option("栖霞区","204"))
      $("context").appendChild(nj)
     }
    }
    function calc()
    {
     var x=$("context").childNodes.length-1;
     alert(x)
    }
    function remove()
    {
     var i=$("context").childNodes.length-1;
     var remobj=$("context").childNodes[i];
     remobj.removeNode(true)
    }
   </script>
<body>
<div id="context">
   <select id="area" onchange="choice()">
   </select>
</div>
<input type=button value="显示" onclick="show()">
<input type=button value="计算结点" onclick="calc()">
<input type=button value="删除" onclick="remove()">
</body>
</html>

function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" ";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<head>
<script language=JavaScript>
function $(id)
{
return document.getElementById(id)
}
function show()
{
var selectObj=$("area")
var myOption=document.createElement("option")
myOption.setAttribute("value","10")
myOption.appendChild(document.createTextNode("上海"))
var myOption1=document.createElement("option")
myOption1.setAttribute("value","100")
myOption1.appendChild(document.createTextNode("南京"))
selectObj.appendChild(myOption)
selectObj.appendChild(myOption1)
}
function choice()
{
var index=$("area").selectedIndex;
var val=$("area").options[index].getAttribute("value")
if(val==10)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh=document.createElement("select")
sh.add(new Option("浦东新区","101"))
sh.add(new Option("黄浦区","102"))
sh.add(new Option("徐汇区","103"))
sh.add(new Option("普陀区","104"))
$("context").appendChild(sh)
}
if(val==100)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj=document.createElement("select")
nj.add(new Option("玄武区","201"))
nj.add(new Option("白下区","202"))
nj.add(new Option("下关区","203"))
nj.add(new Option("栖霞区","204"))
$("context").appendChild(nj)
}
}
function calc()
{
var x=$("context").childNodes.length-1;
alert(x)
}
function remove()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}
</script>
<body><div id="context">
<select id="area" on
change="choice()">
</select>
</div>
<input type=button value="显示" onclick="show()">
<input type=button value="计算结点" onclick="calc()">
<input type=button value="删除" onclick="remove()">
</body>
</html>

改进版:在select中添加、修改、删除option元素

依赖那么些东西,本人用JQEULANDY AJAX JSON达成了三个小成效如下:
JS代码:(只取了于SELECT相关的代码)

function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i ){
var word = document.createElement("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement("OPTION");
word.text = f.word.value;
f.keywords.add(word);
}
但上述 add() 方法只在IE下有效,为包容FF和Opera,对上述代码进行了弹指间改过,退换后代码如下: function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i ){
   var oOption=new Option(arguments[i],arguments[i]);
   document.getElementById("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
   var oOption=new Option(f.word.value,f.word.value);
   f.keywords[f.keywords.length]=oOption;
}

复制代码 代码如下:

全副实例的欧洲经济共同体代码如下:

/**
* @description 零部件联合浮动下拉列表 (用JQUE宝马X5Y 的AJAX协作JSON完毕)
* @prarm selectId 下拉列表的ID
* @prarm method 要调用的章程名称
* @prarm temp 此处贮存软件ID
* @prarm url 要跳转的地点
*/
function linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//使用get方法访问后台
dataType: "json",//再次回到json格式的数码
url: url,//要拜候的后台地址
data: "method=" method "&temp=" temp,//要发送的数目
success: function(msg){//msg为回去的多少,在这里处做多少绑定
var data = msg.lists;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description 将JSON数据转变来HTML数据格式
* @prarm selectId 下拉列表的ID
* @prarm nodeArray 返回的JSON数组
*
*/
function coverJsonToHtml(selectId,nodeArray){
//get select
var tempSelect=$j("#" selectId);
//clear select value
isClearSelect(selectId,'0');
var tempOption=null;
for(var i=0;i<nodeArray.length;i ){
//create select Option
tempOption= $j('<option value="' nodeArray[i].dm '">' nodeArray[i].mc '</option> ');
//put Option to select
tempSelect.append(tempOption);
}
// 获取退化零件列表
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description 清空下拉列表的值
* @prarm selectId 下拉列表的ID
* @prarm index 初叶清空的下标地点
*/
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(length!=index){
//长度是在转移的,因为必得重新赢得
length=document.getElementById(selectId).options.length;
for(var i=index;i<length;i )
document.getElementById(selectId).options.remove(i);
length=length/2;
}
}
/**
* @description 获取退化构件列表
* @prarm selectId1 引用软件下拉列表的ID
* @prarm selectId2 退化零件下拉列表的ID
*/
function getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1);//援用软件下拉列表
var obj2=document.getElementById(selectId2);//退化零部件下拉列表
var len=obj1.options.length;
//当引用软件列表长度等于1时回去,不做操作
if(len==1){
return false;
}
//清空下拉列表的值,二种艺术都能够
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i<len; i ){
var option= obj1.options[i];
//援用软件被入选项不参预
if(i!=obj1.selectedIndex){
//克隆OPTION并增添到SELECT中
obj2.appendChild(option.cloneNode(true));
}
}
}

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>javascript select options text value</title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">
<!--
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i ){
   var oOption=new Option(arguments[i],arguments[i]);
   document.getElementById("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
   var oOption=new Option(f.word.value,f.word.value);
   f.keywords[f.keywords.length]=oOption;
}
function watch_sel(f){ // 编辑
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 修改
f.keywords[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 删除
f.keywords.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 保存
var set = "";
for(var i=0; i<f.keywords.length; i ){
set = f.keywords[i].text ";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
<script language="javascript">
<!--
watch_ini("小编","你","妳","他","她","它","尔"); // 起先关键词
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="增加" onclick="watch_add(this.form);" />
<input type="button" value="修改" onclick="watch_mod(this.form);" />
<input type="button" value="删除" onclick="watch_del(this.form);" />
<input type="button" value="保存" onclick="watch_set(this.form);" />
</form>

HTML代码:

用一个字符串成立叁个数组方法:

复制代码 代码如下:

<script language="javascript">   

<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td class="Search_item_18"> <span class="Edit_mustinput">*</span>援用软件:</td>
<td class="Search_content_82">
<input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" >
<input name="yyrjDm" id="yyrjDm" type="hidden" >
<input type="button" class="Search_button_select"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择...">
</td>
</tr>
<tr>
<td class="Search_item"> <span class="Edit_mustinput">*</span>援用分版:</td>
<td class="Search_content" id="yyfb">
<select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</select>
</td>
</tr>
<tr>
<td class="Search_item">退化零件:</td>
<td class="Search_content" id="thgj">
<select name="thgjDm" style="width:160" id="thgjDm">
<option value="-1" selected>无</option>
</select>
</td>
</tr>
</TABLE>

</body>
</html> <script>functionspli(){datastr="2,2,3,5,6,6";      varstr=newArray();       str=datastr.split(",");          for(i=0;i<str.length ;i )        {document.write(str[i] "<br/>");  }   }   spli();   </script>   -- 来源于网络

javascript对它们的操作 豆蔻梢头、幼功通晓 复制代码 代码如下: var e = document.getElementById("sel...

 

 

<select id="ddlResourceType" onchange="getvalue(this)">

</select>

    动态删除select中的全体options:

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

     动态删除select中的某风姿罗曼蒂克项option:

       document.getElementById("ddlResourceType").options.remove(indx); 

     动态增多select中的项option:

       document.getElementById("ddlResourceType").options.add(new Option(text,value));

     上边在IE和FireFox都能测验成功,希望将来您能够用上。

实际上用标准的DOM操作也足以,正是document.createElement,appendChild,removeChild之类的。

取值方面

    function getvalue(obj)

    {

        var m=obj.options[obj.selectedIndex].value

        alert(m);//获取value

        var n=obj.options[obj.selectedIndex].text

        alert(n);//获取文本

    }

==============================================================================

1 检查测量试验是或不是有入选

if (objSelect.selectedIndex > - 1 ) {

// 表明选中

} else {

// 表明未有入选

}

2 删除被入选的项

objSelect.options[objSelect.selectedIndex] = null ;

3 增加项

objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );

4 改良所选拔中的项

objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );

5 获得所选拔项的文本

objSelect.options[objSelect.selectedIndex].text;

6 获得所接受项的值

objSelect.options[objSelect.selectedIndex].value;

======================================================================

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

<html xmlns=";

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS对select动态增多options操作[IE和FireFox兼容]</title>

<script language="javascript" type="text/javascript">

function xlbchange(s){

switch (s){

   case "1" :

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

     var soojs_value=[0,1,2,3];

    var soojs_text=["精气神儿提炼","作风设计","指标设置","思想提高"];

    for ( var i=0;i<soojs_value.length;i ){

     var   oOption   =   document.createElement("OPTION");  

     oOption.value=soojs_value[i];  

     oOption.text=soojs_text[i];  

     zpmange.lb.options.add(oOption);

     }

      break;

   case "2" :

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

     var soojs_value=[0,1,2,3,4,5,6,7];

    var soojs_text=["校徽","校训","校歌","校名字体","校史展室","宣传画集","宣传光盘","办公用品纪念品"];

    for ( var i=0;i<soojs_value.length;i ){

     var   oOption   =   document.createElement("OPTION");  

     oOption.value=soojs_value[i];  

     oOption.text=soojs_text[i];  

     zpmange.lb.options.add(oOption);

     }  

      break;

        case "3":

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

     var soojs_value=[0,1,2,3];

    var soojs_text=["高校景色设计","高校油画设计","学园浮雕设计","走道文化设计"];

    for ( var i=0;i<soojs_value.length;i ){

     var   oOption   =   document.createElement("OPTION");  

     oOption.value=soojs_value[i];  

     oOption.text=soojs_text[i];  

     zpmange.lb.options.add(oOption);

     }

   break;   

        case "4":

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

     var soojs_value=[0,1,2];

    var soojs_text=["高校制度","文化活动","行为标准"];

    for ( var i=0;i<soojs_value.length;i ){

     var   oOption   =   document.createElement("OPTION");  

     oOption.value=soojs_value[i];  

     oOption.text=soojs_text[i];  

     zpmange.lb.options.add(oOption);

     }

   break;

default :

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

var   oOption   =   document.createElement("OPTION");

     oOption.value=0;  

     oOption.text="请选用文章类型";

zpmange.lb.options.add(oOption);

}

}

</script>

</head>

<body>

<form action="zpmange.asp" name="zpmange" method="post">

<p><select id="ddlResourceType" onchange="getvalue(this)"><br />

</select></p>

<p> 动态删除select中的全体options: <br />

    document.getElementById("ddlResourceType").options.length=0; <br />

<br />

    动态删除select中的某生机勃勃项option: <br />

    document.getElementById("ddlResourceType").options.remove(indx); </p>

<p> 动态增添select中的项option: <br />

    document.getElementById("ddlResourceType").options.add(new Option(text,value)); </p>

<p> 下面在IE和FireFox都能测量试验成功,希望以往你能够用上。 <br />

    其实用标准的DOM操作也足以,就是document.createElement,appendChild,removeChild之类的。 </p>

<p>取值方面<br />

    function getvalue(obj)<br />

    {<br />

    var m=obj.options[obj.selectedIndex].value<br />

    alert(m);//获取value<br />

    var n=obj.options[obj.selectedIndex].text<br />

    alert(n);//获取文本<br />

    }<br />

</p>

<p>例子:</p>

<table width="80%" border="0" align="center" cellpadding="1" cellspacing="1" style="border-style:double">

    <tr>

      <td width="50%" height="41" ><div align="center">

      

            <select name="xt" id="xt" onchange="xlbchange(this.value)">

          <option selected="selected">请采用小说系统</option>

                  <option value="1">思想视别系统</option>

                  <option value="2">视觉识别系统</option>

                  <option value="3">情况视别系统</option>

                  <option value="4">行为视别系统</option>         

        </select>

               

      </div></td>

      <td width="61%" ><div align="center">

        <select name="lb" id="lb">

   <option selected="selected">请选拔小说类型</option>

        </select>

      </div></td>

    </tr>

    <tr>

      <td height="203" colspan="2" > </td>

    </tr>

</table>

</form>

</body>

</html>

 

本文由pc28.am发布于前端技术,转载请注明出处:javascript对select标签的控制,使用js对select动态添

上一篇:前端是不是相应将CSS和JS分开设置七个分歧职分, 下一篇:没有了
猜你喜欢
热门排行
精彩图文