编程 Javascript

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程序设计有所帮助。

JS更改select内option属性的方法

- Author -

w93223010

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

script标签的 charset 属性使用说明

Dec 04 Javascript

Js 获取Gridview选中行的内容操作步骤

Feb 05 Javascript

JS实现很酷的水波文字特效实例

Feb 26 Javascript

jQuery中animate动画第二次点击事件没反应

May 07 Javascript

AngularJS 整理一些优化的小技巧

Aug 18 Javascript

jQuery插件ajaxFileUpload异步上传文件

Oct 19 Javascript

[原创]JS基于FileSaver.js插件实现文件保存功能示例

Dec 08 Javascript

JavaScript中数据类型转换总结

Dec 25 Javascript

jQuery插件zTree实现的多选树效果示例

Mar 08 Javascript

jquery实现图片轮播器

May 23 jQuery

基于LayUI实现前端分页功能的方法

Jul 22 Javascript

antd Upload 文件上传的示例代码

Dec 14 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