脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS更改select内option属性

JS更改select内option属性的方法

 更新时间：2015年10月14日 11:05:28   作者：w93223010  
这篇文章主要介绍了JS更改select内option属性的方法,涉及JavaScript动态操作页面select元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • uniapp中的picker选择器的几种使用场景

    uniapp中的picker选择器的几种使用场景

    本文主要介绍了uniapp中的picker选择器的几种使用场景，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • 微信小程序实现导航功能的操作步骤

    微信小程序实现导航功能的操作步骤

    这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 动态加载脚本提升javascript性能

    动态加载脚本提升javascript性能

    动态加载脚本可以有效提升javascript性能，下面有个不错的示例，大家可以参考下
    2014-02-02
  • Winform客户端向web地址传参接收参数的方法

    Winform客户端向web地址传参接收参数的方法

    这篇文章主要介绍了Winform客户端向web地址传参接收参数的方法的相关资料,需要的朋友可以参考下
    2016-05-05
  • 利用js实现Vue2.0中数据的双向绑定功能

    利用js实现Vue2.0中数据的双向绑定功能

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,下面这篇文章主要给大家介绍了关于如何利用js实现Vue2.0中数据的双向绑定功能的相关资料,需要的朋友可以参考下
    2021-07-07
  • JS实现加载时锁定HTML页面元素的方法

    JS实现加载时锁定HTML页面元素的方法

    这篇文章主要介绍了JS实现加载时锁定HTML页面元素的方法,涉及javascript针对页面元素的遍历与属性操作相关实现技巧,需要的朋友可以参考下
    2017-06-06
  • JavaScript 中什么时候使用 Map 更好

    JavaScript 中什么时候使用 Map 更好

    这篇文章主要介绍了JavaScript中什么时候使用Map更好，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-08-08
  • 提高网站信任度的技巧

    提高网站信任度的技巧

    网站信任度：一方面指浏览者对于站点的信任程度,另一方面指搜索引擎对于网站的信任值（TrustRank）,网站信任度对于企业站点更为重要.在得到更高信任度的同时,流量更容易转化为实在的收入.
    2008-10-10
  • 微信小程序自定义底部弹出框

    微信小程序自定义底部弹出框

    这篇文章主要为大家详细介绍了微信小程序自定义底部弹出框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • thinkjs微信中控之微信鉴权登陆的实现代码

    thinkjs微信中控之微信鉴权登陆的实现代码

    这篇文章主要介绍了thinkjs微信中控之微信鉴权登陆的实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08

最新评论