js 操作select和option

2019独角兽企业重金招聘Python工程师标准>>>

1.动态创建selectfunction createSelect(){var mySelect = document.createElement_x("select");mySelect.id = "mySelect"; document.body.appendChild(mySelect);}2.添加选项optionfunction addOption(){//根据id查找对象，var obj=document.getElementByIdx_x('mySelect');//添加一个选项
obj.add(new Option("文本","值"));    //这个只能在IE中有效obj.options.add(new Option("text","value")); //这个兼容IE与firefox}3.删除所有选项optionfunction removeAll(){var obj=document.getElementByIdx_x('mySelect');
obj.options.length=0;}4.删除一个选项optionfunction 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.修改选项optionvar obj=document.getElementByIdx_x('mySelect');var index=obj.selectedIndex; //序号，取当前选中选项的序号var val = obj.options[index]=new Option("新文本","新值");8.删除selectfunction 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共勉！！

`s操作checkbox,radio,select`

博客分类： JS

最近经常用JS操作 select checkbox 及radio 几个简单函数记录如下 以备查用     Js代码  function getRadioValue(radioName){               var obj = document.getElementsByName(radioName);           var objLen= obj.length;           var i;        for (i = 0;i< objLen;i++){            if (obj [i].checked==true) {             return obj [i].value;             }          }          return "";    }                      //获取复选框的值    function getCheckboxValue(radioName){      var obj = document.getElementsByName(radioName);       var objLen= obj.length;       var i;      var result="";    for (i = 0;i<objLen;i++){        if (obj [i].checked==true) {         result+=obj [i].value+",";         }      }      return result;    }                  //复选框 是否处于 选中状态    function  CheckboxToChecked(eleName, cValue){           var obj = document.getElementsByName(eleName);            var objLen= obj.length;       var i;      var result="";    for (i = 0;i<objLen;i++){              if (obj [i].value==cValue) {              obj [i].checked=true;        }else{        obj [i].checked=false;        }      }      return result;    }                  //checkBox至少选中一项    function chkCheckBoxChs(objNam,txt){     var obj = document.getElementsByName(objNam);     var objLen= obj.length;     var num=0;    for (i = 0;i< objLen;i++){    if (obj [i].checked==true) {    num++;    }    }    if(num==0){         alert(txt);              return false;         }         return true;    }   function getRadioValue(radioName){    var obj = document.getElementsByName(radioName);    var objLen= obj.length;    var i;  for (i = 0;i< objLen;i++){  if (obj [i].checked==true) {    return obj [i].value;  }    }    return "";  }    //获取复选框的值  function getCheckboxValue(radioName){    var obj = document.getElementsByName(radioName);    var objLen= obj.length;    var i;    var result="";  for (i = 0;i<objLen;i++){  if (obj [i].checked==true) {    result+=obj [i].value+",";  }    }    return result;  }     //复选框 是否处于 选中状态  function  CheckboxToChecked(eleName, cValue){    var obj = document.getElementsByName(eleName);    var objLen= obj.length;    var i;    var result="";  for (i = 0;i<objLen;i++){     if (obj [i].value==cValue) {    obj [i].checked=true;  }else{  obj [i].checked=false;  }    }    return result;  }    //checkBox至少选中一项  function chkCheckBoxChs(objNam,txt){  var obj = document.getElementsByName(objNam);  var objLen= obj.length;  var num=0;  for (i = 0;i< objLen;i++){  if (obj [i].checked==true) {  num++;  }  }  if(num==0){  alert(txt);   return false;  }  return true;  }  其他 只读的属性的为 readOnly (注意大小写)  Js代码  function toReadOnly(ele ,flag){            var obj=document.getElementById(ele);            if(obj!=null){                 if(flag==0){//可读                    obj.readOnly=false;                     obj.style.backgroundColor="white";                 }else{//只读                     obj.readOnly=true;                     obj.value="";                     obj.style.backgroundColor="#D8D8D8";                 }          }        }   select操作  <html>  <body>  <script>  function test(){  var obj  = document.getElementById("temp");  var value = obj.options[obj.selectedIndex].value;  alert(value);  }  </script>  <form>  <select name="cars" id="temp" onclick="test();">  <option value="volvo">Volvo</option>  <option value="saab">Saab</option>  <option value="fiat">Fiat</option>  <option value="audi">Audi</option>  </select>  </form>  </body>  </html>  js获取select元素的value值和文本的方法  获得选中的对象  var selectobj = document.getElementById("selectId");  获得索引;  var　index = selectobj.selectedIndex;  获得选中的value的值  var value = selectobj.options[index].value  文本的值:  var text = selectobj.options[index].text

转载于:https://my.oschina.net/gxs2012/blog/139379

js 操作select和option相关推荐

js操作select相关方法(收集)
<js操作select相关方法> 1.判断select选项中是否存在value="paravalue"的item 2.向select选项中加入一个item 3.从s ...
Js操作Select大全(取值、设置选中)
Js操作Select大全(取值.设置选中) Js操作Select是很常见的,也是比较实用的. jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自 ...
js操作select标签
Select的动态添加.删除.移动.获取选中项的值.排序等等操作. function AddOption(obj,text,value,title){ var selTarget = document ...
js 操作 select option
2019独角兽企业重金招聘Python工程师标准>>> 1 检测是否有选中 if (objSelect.selectedIndex > - 1 ) { // 说明选中 } el ...
JS实现select去除option的使用注意事项
网上讲JS动态添加option和删除option的文章很多,在此推荐一篇: http://www.jb51.net/article/35205.htm 我使用的是如下方法: function remo ...
js 获取 select的option的 id值
<select > <option value="">--请选择--</option><option id="1" v ...
Js操作Select大全
判断select选项中是否存在Value="paraValue"的Item 向select选项中加入一个Item 从select选项中删除一个Item 删除select中选中 ...
js 得到select所有option里的值
1://取得所有的option个数 document.getElementById('---').options.length 2://取得每个option的ID值 document.getEleme ...
js 多选框被选中触发的事件_JS实现select选中option触发事件操作示例
本文实例讲述了JS实现select选中option触发事件操作.分享给大家供大家参考,具体如下: 我们在用到下拉列表框select时,需要对选中的选项触发事件,其实本身没有触发事件方法,我们只有在se ...

js 操作select和option

`s操作checkbox,radio,select`

js 操作select和option相关推荐

最新文章

热门文章