快捷導(dǎo)航

JS更改select內(nèi)option屬性的方法

更新時(shí)間：2015年10月14日 11:05:28 作者：w93223010

這篇文章主要介紹了JS更改select內(nèi)option屬性的方法,涉及JavaScript動(dòng)態(tài)操作頁面select元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS更改select內(nèi)option屬性的方法。分享給大家供大家參考。具體如下：

幫一位友人解決了一個(gè)小問題，需求是更改選中選項(xiàng)卡內(nèi)顯示的文本值，新值存放在某個(gè)文本框內(nèi)

初始窗口：

<html>
 <head>
  <title>原窗口</title>
  <script>
   var parentValue=""; //全局變量，用于保存點(diǎn)擊詳情時(shí)select中指定opeion的值
   function detail() {
    var select=document.getElementById('SHGX'); //獲得select對(duì)象
    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='獨(dú)生子'>獨(dú)生子</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); //調(diào)用父窗口的函數(shù)
  }
 </script>
 </head>
 <body>
 <input id="text_01" type="text" value=""/>
 <button onclick="modify();">修改</button>
 </body>
</html>

希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

uniapp中的picker選擇器的幾種使用場(chǎng)景
本文主要介紹了uniapp中的picker選擇器的幾種使用場(chǎng)景，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
微信小程序?qū)崿F(xiàn)導(dǎo)航功能的操作步驟
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)導(dǎo)航功能的操作步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
動(dòng)態(tài)加載腳本提升javascript性能
動(dòng)態(tài)加載腳本可以有效提升javascript性能，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-02-02
Winform客戶端向web地址傳參接收參數(shù)的方法
這篇文章主要介紹了Winform客戶端向web地址傳參接收參數(shù)的方法的相關(guān)資料,需要的朋友可以參考下
2016-05-05
利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實(shí)現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于如何利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能的相關(guān)資料,需要的朋友可以參考下
2021-07-07
JS實(shí)現(xiàn)加載時(shí)鎖定HTML頁面元素的方法
這篇文章主要介紹了JS實(shí)現(xiàn)加載時(shí)鎖定HTML頁面元素的方法,涉及javascript針對(duì)頁面元素的遍歷與屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-06-06
JavaScript?中什么時(shí)候使用?Map?更好
這篇文章主要介紹了JavaScript中什么時(shí)候使用Map更好，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-08-08
提高網(wǎng)站信任度的技巧
網(wǎng)站信任度：一方面指瀏覽者對(duì)于站點(diǎn)的信任程度,另一方面指搜索引擎對(duì)于網(wǎng)站的信任值（TrustRank）,網(wǎng)站信任度對(duì)于企業(yè)站點(diǎn)更為重要.在得到更高信任度的同時(shí),流量更容易轉(zhuǎn)化為實(shí)在的收入.
2008-10-10
微信小程序自定義底部彈出框
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義底部彈出框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
thinkjs微信中控之微信鑒權(quán)登陸的實(shí)現(xiàn)代碼
這篇文章主要介紹了thinkjs微信中控之微信鑒權(quán)登陸的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08