js 操作select与option(示例讲解)


Posted in Javascript onDecember 20, 2013

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

Javascript 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
JS中表单的使用小结
Jan 11 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 #Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 #Javascript
js select option对象小结
Dec 20 #Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 #Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 #Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 #Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 #Javascript
You might like
1 Tube Radio
2021/03/02 无线电
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
php安装swoole扩展的方法
2015/03/19 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
js实现无缝滚动图
2017/02/22 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
vue实现购物车的监听
2020/04/20 Javascript
Pandas中把dataframe转成array的方法
2018/04/13 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Python多项式回归的实现方法
2019/03/11 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
公司业务员岗位职责
2014/03/18 职场文书
会计专业自荐信
2014/06/03 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
工作服管理制度范本
2015/08/06 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
入团申请书格式
2019/06/20 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Golang实现AES对称加密的过程详解
2021/05/20 Golang
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫