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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
JavaScript编写开发动态时钟
Jul 29 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图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Open and Print a Word Document
2007/06/15 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
React实现todolist功能
2020/12/28 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
Python Socket编程入门教程
2014/07/11 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
高考考python编程是真的吗
2020/07/20 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
汽车维修工岗位职责
2014/02/12 职场文书
工程质量月活动方案
2014/02/19 职场文书
中学生家长评语大全
2014/04/16 职场文书
计算机软件专业求职信
2014/06/10 职场文书
先进党支部事迹材料
2014/12/24 职场文书
捐款感谢信
2015/01/20 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技