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 相关文章推荐
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
JS+DIV实现拖动效果
Feb 11 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
一个多文件上传的例子(原创)
2006/10/09 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python进行文件对比的方法
2018/12/24 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
python3中数组逆序输出方法
2020/12/01 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
大专生自荐书范文
2014/06/22 职场文书
法人委托书
2014/07/31 职场文书
放弃继承权公证书
2015/01/23 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
捐书仪式主持词
2015/07/04 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
详解Python requests模块
2021/06/21 Python
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS