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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
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
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
最常用的12种设计模式小结
2011/08/09 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
解决python对齐错误的方法
2020/07/16 Python
python Gabor滤波器讲解
2020/10/26 Python
python打包生成so文件的实现
2020/10/30 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
人力资源作业细则
2014/03/03 职场文书
2014全国两会心得体会
2014/03/17 职场文书
爱祖国演讲稿
2014/05/04 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
倡议书范文大全
2015/04/28 职场文书
摩登时代观后感
2015/06/03 职场文书
网络妈妈观后感
2015/06/08 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫