JS更改select内option属性的方法


Posted in Javascript onOctober 14, 2015

本文实例讲述了JS更改select内option属性的方法。分享给大家供大家参考。具体如下:

帮一位友人解决了一个小问题,需求是更改选中选项卡内显示的文本值,新值存放在某个文本框内

初始窗口:

<html>
 <head>
  <title>原窗口</title>
  <script>
   var parentValue=""; //全局变量,用于保存点击详情时select中指定opeion的值
   function detail() {
    var select=document.getElementById('SHGX'); //获得select对象
    parentValue=select.options[select.selectedIndex].text; 
    window.open('详情窗口.html')
   }
   function updateSelect(childValue) {
    var select=document.getElementById('SHGX'); 
    for(var i=0;i<select.length;i++) {
     if(select.options[i].text==parentValue) 
      select.options[i].text=childValue;
    }    
   }
  </script>
 </head>
 <body>
  <select id='SHGX'>
   <option value='111' title='夫'>夫</option>
   <option value='112' title='妻'>妻</option>
   <option value='120' title='子'>子</option>
   <option value='121' title='独生子'>独生子</option>
   <option value='122' title='继子'>继子</option>
   <option value='128' title='女婿'>女婿</option>   
  </select>
  <button onclick="detail(); ">详情</button>
 </body>
</html>

详情窗口:

<html>
 <head>
 <title>详情窗口</title>
 <script>
  function modify() {
  var childValue=document.getElementById('text_01').value;
  opener.updateSelect(childValue); //调用父窗口的函数
  }
 </script>
 </head>
 <body>
 <input id="text_01" type="text" value=""/>
 <button onclick="modify();">修改</button>
 </body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 #Javascript
JS实现的最简Table选项卡效果
Oct 14 #Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 #Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 #Javascript
smartcrop.js智能图片裁剪库
Oct 14 #Javascript
深入学习JavaScript对象
Oct 13 #Javascript
快速学习JavaScript的6个思维技巧
Oct 13 #Javascript
You might like
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
python计算最大优先级队列实例
2013/12/18 Python
python发送邮件功能实现代码
2016/07/15 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
教师师德承诺书
2014/03/26 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书