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限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
js实现文字选中分享功能
Jan 25 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
Angular2 父子组件通信方式的示例
Jan 29 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
Vue退出登录时清空缓存的实现
Nov 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代码
2012/09/14 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
numpy 声明空数组详解
2019/12/05 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
python中Mako库实例用法
2020/12/31 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
经理职责范文
2013/11/08 职场文书
有关爱国演讲稿
2014/05/07 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python