码迷，mamicode.com
首页 > Web开发 > 详细

js 操作select和option

时间：2016-08-11 17:30:24      阅读：209      评论：0      收藏：0      [点我收藏+]

标签：

1.动态创建select
 
     function createSelect(){
 
var mySelect = document.createElement_x("select");
           mySelect.id = "mySelect"; 
           document.body.appendChild(mySelect);
       }
 
2.添加选项option
 
     function addOption(){
 
          //根据id查找对象，
            var obj=document.getElementByIdx_x(‘mySelect‘);
 
           //添加一个选项
 obj.add(new Option("文本","值"));    //这个只能在IE中有效
          obj.options.add(new Option("text","value")); //这个兼容IE与firefox
      }
 
3.删除所有选项option
 
     function removeAll(){
            var obj=document.getElementByIdx_x(‘mySelect‘);
 obj.options.length=0;
 
     }
 
4.删除一个选项option
 
function removeOne(){
            var obj=document.getElementByIdx_x(‘mySelect‘);
 
           //index,要删除选项的序号，这里取当前选中选项的序号
 
var index=obj.selectedIndex;
 obj.options.remove(index);
      }
 
5.获得选项option的值
 
var obj=document.getElementByIdx_x(‘mySelect‘);
 
var index=obj.selectedIndex; //序号，取当前选中选项的序号
 
var val = obj.options[index].value;
 
6.获得选项option的文本
 
var obj=document.getElementByIdx_x(‘mySelect‘);
 
var index=obj.selectedIndex; //序号，取当前选中选项的序号
 
var val = obj.options[index].text;
 
7.修改选项option
 
var obj=document.getElementByIdx_x(‘mySelect‘);
 
var index=obj.selectedIndex; //序号，取当前选中选项的序号
 
var val = obj.options[index]=new Option("新文本","新值");
 
8.删除select
 
      function removeSelect(){
             var mySelect = document.getElementByIdx_x("mySelect");
 mySelect.parentNode.removeChild(mySelect);
      }
 
 
 
整个实例的完整代码如下：
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
    <meta http-equiv="Content-Type" content="text/html">
 <head>
    <script language=JavaScript>
     function $(id)
     {
      return document.getElementByIdx_x(id)
     }
     function show()
     {
      var selectObj=$("area")
      var myOption=document.createElement_x("option")
      myOption.setAttribute("value","10")
      myOption.appendChild(document.createTextNode("上海"))
      var myOption1=document.createElement_x("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_x("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_x("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>
 
 
 
改进版：在select中添加、修改、删除option元素
 
function watch_ini(){ // 初始
 for(var i=0; i<arguments.length; i++){
 var word = document.createElement_x("OPTION");
 word.text = arguments[i];
 watch.keywords.add(word); // watch. is form name
 }
 }
 function watch_add(f){ // 增加
 var word = document.createElement_x("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.getElementByIdx_x("MySelect")[i]=oOption;
 }
 }
 function watch_add(f){ // 增加
    var oOption=new Option(f.word.value,f.word.value);
    f.keywords[f.keywords.length]=oOption;
 }
 

整个实例的完整代码如下：
 
<!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.getElementByIdx_x("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>
 
用一个字符串创建一个数组方法:
 
<script language="javascript">   
 </body>
 </html>
 <script>
 function spli(){
 datastr="2,2,3,5,6,6";      
 var str= new Array();    
    str=datastr.split(",");      
     for (i=0;i<str.length ;i++ )   
      { document.write(str[i]+"<br/>");  }   
 }   
 spli();   
 </script 
今天调试了一段js，在ie上运行良好，在火狐上调试出现错误，查资料发现
 
obj.add(new Option("文本","值"));    //这个只能在IE中有效
          obj.options.add(new Option("text","value")); //这个兼容IE与firefox
 
因为这段代码，在网上查资料收藏了这篇文章，实时的温故js
 
共勉！！

 

1.动态创建select

function createSelect(){

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

2.添加选项option

function addOption(){

//根据id查找对象，
var obj=document.getElementByIdx_x(‘mySelect‘);

//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}

3.删除所有选项option

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

}

4.删除一个选项option

function removeOne(){
var obj=document.getElementByIdx_x(‘mySelect‘);

//index,要删除选项的序号，这里取当前选中选项的序号

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

5.获得选项option的值

var obj=document.getElementByIdx_x(‘mySelect‘);

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

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

6.获得选项option的文本

var obj=document.getElementByIdx_x(‘mySelect‘);

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

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

7.修改选项option

var obj=document.getElementByIdx_x(‘mySelect‘);

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

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

8.删除select

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

 

整个实例的完整代码如下：

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
< html>
< head>
<meta http-equiv="Content-Type" content="text/html">
< head>
<script language=JavaScript>
function $(id)
{
return document.getElementByIdx_x(id)
}
function show()
{
var selectObj=$("area")
var myOption=document.createElement_x("option")
myOption.setAttribute("value","10")
myOption.appendChild(document.createTextNode("上海"))
var myOption1=document.createElement_x("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_x("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_x("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>

 

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

function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var word = document.createElement_x("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement_x("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.getElementByIdx_x("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}


整个实例的完整代码如下：

< !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.getElementByIdx_x("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>

用一个字符串创建一个数组方法:

<script language="javascript">

  1. < /body>
    < /html>
  2. < script>
  3. function spli(){
  4. datastr="2,2,3,5,6,6";
  5. var str= new Array();
  6. str=datastr.split(",");
  7. for (i=0;i<str.length ;i++ )
  8. { document.write(str[i]+"<br/>"); }
  9. }
  10. spli();
  11. </script

    今天调试了一段js，在ie上运行良好，在火狐上调试出现错误，查资料发现

    obj.add(new Option("文本","值")); //这个只能在IE中有效
    obj.options.add(new Option("text","value")); //这个兼容IE与firefox

    因为这段代码，在网上查资料收藏了这篇文章，实时的温故js

    共勉！！

js 操作select和option

标签：

原文地址：http://www.cnblogs.com/henuyuxiang/p/5761441.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！