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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 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 错误处理经验分享
2011/10/11 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
Python列表(list)常用操作方法小结
2015/02/02 Python
使用Python绘制图表大全总结
2017/02/11 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
光荣入党自我鉴定
2014/01/22 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2014年网管工作总结
2014/12/11 职场文书
千与千寻观后感
2015/06/04 职场文书