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 对表格的行和列都能加亮显示
Dec 26 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
js window.event对象详尽解析
2009/02/17 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
JavaScript ES 模块的使用
2020/11/12 Javascript
基于Python的关键字监控及告警
2017/07/06 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
详解python UDP 编程
2020/08/24 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
企业仓管员岗位职责
2014/06/15 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
525心理健康活动总结
2015/05/08 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
八一建军节主持词
2015/07/01 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
Python&Matlab实现樱花的绘制
2022/04/07 Python