- 浏览: 313358 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
如果这就是爱情:
有相应的CSS和JS代码吗?
div+css js按钮特效 鼠标移上去显示子菜单 -
awaterway:
正好要用。哈哈哈哈。。
java调用window的cmd的ping指令 -
一江山:
...
Eclipse 项目有红感叹号 -
autorun:
...
Eclipse 项目有红感叹号 -
本色是本色:
试了 好像不行哦
form表单中enctype="multipart/form-data"的意思
注意:Option中的O是要大写的,不然语法报错 1.动态创建select Javascript代码 function createSelect(){ Select = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option Javascript代码 function addOption(){ //根据id查找对象, var obj=document.getElementById('mySelect'); //添加一个选项 obj.add(new Option("文本","值")); //这个只能在IE中有效 obj.options.add(new Option("text","value")); //这个兼容IE与firefox } ---------------------------------------------------------------- Option里面的四个参数分别的意思 new Option (text,value,defaultselected,selected) new Option (文本,值,默认选中的选项,选中的选项) 看测试结果就懂了 <select id="s1"></select> <script> var op = new Option("显示文本1","值1",false,false); s1.options.add(op); op = new Option("显示文本2","值2",false,true); s1.options.add(op); </script> ----------------------------------------------------------------- 3.删除所有选项option Javascript代码 function removeAll(){ var obj=document.getElementById('mySelect'); obj.options.length=0; } 4.删除一个选项option Javascript代码 function removeOne(){ var obj=document.getElementById('mySelect'); //index,要删除选项的序号,这里取当前选中选项的序号 var index=obj.selectedIndex; obj.options.remove(index); } 5.获得选项option的值 Javascript代码 var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序号,取当前选中选项的序号 var val = obj.options[index].value; 6.获得选项option的文本 Javascript代码 var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序号,取当前选中选项的序号 var val = obj.options[index].text; 7.修改选项option Javascript代码 var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序号,取当前选中选项的序号 var val = obj.options[index]=new Option("新文本","新值"); 8.删除select Javascript代码 function removeSelect(){ var mySelect = document.getElementById("mySelect"); mySelect.parentNode.removeChild(mySelect); } 整个实例的完整代码如下: Javascript代码 <!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.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> 改进版:在select中添加、修改、删除option元素 Javascript代码 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(){ // 初始 Javascript代码 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; } 整个实例的完整代码如下: Javascript代码 <!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> </body> </html>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/yefengzhixia/archive/2009/04/17/4087284.aspx
发表评论
-
java 解析xml格式的字符串
2016-08-03 09:25 894网上有好多种解析xml格式的字符串方式,在此记录下自己用的一种 ... -
微信扫码支付 返回签名错误
2016-06-29 09:46 2806做微信扫码支付时,返回签名错误,在网上搜各种解决方法,都试过了 ... -
js将json数组对象属性的date显示出来
2016-06-28 11:39 704java里面时间类型转换成json数据就成这样了 " ... -
java中在获取的系统时间上推迟一周,或者一年
2015-11-20 14:00 864推迟一周: Calendar curr = Calendar. ... -
select 由左边框移动到右边示例
2015-05-05 15:46 708<script type="text/java ... -
(转)eclipse启动无响应,停留在Loading workbench状态
2015-04-13 10:31 736做开发的同学们或多或少的都会遇到eclipse启动到一定程度时 ... -
jQuery ajax级联二级菜单(转)
2014-10-15 16:33 806默认查出一级分类的第一条数据,和一级分类第一条对应的二级分类条 ... -
js 操作select的option
2014-04-09 14:20 945注意:Option中的O是要大写的,不然语法报错 1.动态 ... -
在jsp页面获取后台json数据
2014-01-03 17:57 9434后台传过来的是一个JsonArray数组 var a = [ ... -
用js动态改变css样式表
2013-08-13 10:36 3701用setAttribute方法实现一个页面两份样式表的效果,具 ... -
<meta http-equiv=名称 content=值>
2013-04-27 16:36 1085meta是html语言head区的一个辅助性标签。几乎所有的网 ... -
JAVA 解决获取空格路径问题
2013-04-15 14:44 1051ReadProperties read = new ReadP ... -
java读取配置文件的几种方法
2013-04-15 12:15 839一.读取xml配置文件 package chb.demo.vo ... -
java读取properties配置文件
2013-04-15 12:07 913try { File directory = new ... -
JAVA解析XML格式字符串
2013-04-12 17:21 4061import org.jdom.Document; impo ... -
java如何做到判断一个字符串是否是数字
2013-04-12 11:25 1048public class NumberDemo { pub ... -
ajax提交并根据返回的值重写标签
2013-04-12 11:09 1493Jsp: function saveCalendar(id) ... -
EL表达式截取字符串
2013-04-12 11:06 930<%@ taglib prefix="fn&q ... -
网页JS弹出广告代码
2013-04-08 11:45 4099借鉴:网页JS弹出广告代码,头部,右下角,网页中漂浮,对联广告 ... -
HTML页面宽度自适应
2013-03-28 10:36 6394<meta name="viewport&qu ...
相关推荐
js 操作select和optionjs 操作select和option
select option 自定义图片的js 、css 以及代码展示,javaScript ;
Javascript操作Select和Option 一个网页 挺全的
jquery获得select option值
本人写的一个html页面,用js实现从数组读数据自动生成select控件
这个文档是本人在开发学习中下的别人的资料,觉得汇总的很好,后面在工作过程中修改了一些,非常有用,尤其是前端的,基本上对select option的操作都在这里面了。有收藏价值。
简单的例子,点击按钮就删除掉option,也可以通过jquery加载的时候进行删除。
javascript 获取select ->option中id、value、label属性及<option></option>中内容
1 检测是否有选中 2.动态创建select 3.添加选项option 4.删除所有选项option 5.删除一个选项option 6.获得选项option的值......
1.动态创建select 代码如下: function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option 代码如下: ...
用js操作select的option,可以增加删除和判断value值是否在下拉列表存在
两个下拉列表,用JS动态添加Select中的Option元素值
主要介绍了JS更改select内option属性的方法,涉及JavaScript动态操作页面select元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
主要介绍了JS实现select选中option触发事件操作,结合实例形式总结分析了javascript针对select下拉选中option项触发事件相关操作技巧,需要的朋友可以参考下
静态二级联动 js 调取数据 带有 option 值
select-option-disabled-emulation.js解决IE6 Select 中 option 的disabled属性无效的办法~~~在页面加载时架子该js,呵呵有点问题:onchange 时间冲突 自己改改··
NULL 博文链接:https://self4j.iteye.com/blog/842276
js函数方法: 代码如下: [removed] function getDefaultSelectedOption(selectId, valIfNull) { var dom, selectId = selectId.replace(/^#/, ”), opts; try { opts = document.getElementById(selectId)....
<option value=”1″>one</option> <option value=”2″>two</option> <option value=”3″>three</option> </select> 则可通过以下script代码s来获取选中的value和text 代码如下: $(“#mySelect”).val(); /...