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 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
详解react-refetch的使用小例子
Feb 15 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网站在线人数统计
2008/04/09 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php继承的一个应用
2011/09/06 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
js字符编码函数区别分析
2008/06/05 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
原生JavaScript实现刮刮乐
2020/09/29 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
opencv+python实现均值滤波
2020/02/19 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
天游软件面试
2013/11/23 面试题
路政管理求职信
2014/06/18 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers
服务器间如何实现文件共享
2022/05/20 Servers