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 相关文章推荐
JavaScript的类型简单说明
Sep 03 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 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
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHP.vs.JAVA
2016/04/29 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
this关键字的含义
2015/04/08 面试题
英文版销售经理个人求职信
2013/11/20 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
实习生矿工检讨书
2014/10/13 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
2015大学迎新标语
2015/07/16 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android