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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
Angular中的interceptors拦截器
Jun 25 Javascript
javascript实现计算器功能
Mar 30 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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中adodbzip类实例
2014/12/08 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
php面向对象重点知识分享
2019/09/27 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
switchery按钮的使用方法
2017/12/18 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
Python的Flask框架的简介和安装方法
2015/11/13 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python 写一个水果忍者游戏
2021/01/13 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
Java基础知识面试要点
2016/07/29 面试题
渗透攻击的测试步骤
2014/06/07 面试题
应届生服务员求职信
2013/10/31 职场文书
小学生考试获奖感言
2014/01/30 职场文书
出生公证委托书
2014/04/03 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
爱护草坪标语
2014/06/24 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
庆祝儿童节标语
2014/10/09 职场文书
务虚会发言材料
2014/12/25 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL