JS更改select內(nèi)option屬性的方法
更新時間：2015年10月14日 11:05:28 作者：w93223010
這篇文章主要介紹了JS更改select內(nèi)option屬性的方法,涉及JavaScript動態(tài)操作頁面select元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS更改select內(nèi)option屬性的方法。分享給大家供大家參考。具體如下：
幫一位友人解決了一個小問題，需求是更改選中選項卡內(nèi)顯示的文本值，新值存放在某個文本框內(nèi)
初始窗口：
<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); //調(diào)用父窗口的函數(shù)
}
</script>
</head>
<body>
<input id="text_01" type="text" value=""/>
<button onclick="modify();">修改</button>
</body>
</html>
希望本文所述對大家的JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
- javascript Select標(biāo)記中options操作方法集合
- js 操作select和option常用代碼整理
- JS & JQuery 動態(tài)添加 select option
- js select option對象小結(jié)
- JS獲取select-option-text_value的方法
- javascript對select標(biāo)簽的控制(option選項/select)
- javascript據(jù)option的value值快速設(shè)定初始的selected選項
- js添加select下默認的option的value和text的方法
- js獲取select選中的option的text示例代碼
- js獲取select默認選中的Option并不是當(dāng)前選中值
- JS實現(xiàn)select選中option觸發(fā)事件操作示例
相關(guān)文章
本文主要介紹了uniapp中的picker選擇器的幾種使用場景，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
微信小程序?qū)崿F(xiàn)導(dǎo)航功能的操作步驟
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)導(dǎo)航功能的操作步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
動態(tài)加載腳本可以有效提升javascript性能，下面有個不錯的示例，大家可以參考下2014-02-02
Winform客戶端向web地址傳參接收參數(shù)的方法
這篇文章主要介紹了Winform客戶端向web地址傳參接收參數(shù)的方法的相關(guān)資料,需要的朋友可以參考下2016-05-05
利用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于如何利用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了JS實現(xiàn)加載時鎖定HTML頁面元素的方法,涉及javascript針對頁面元素的遍歷與屬性操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了JavaScript中什么時候使用Map更好，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
網(wǎng)站信任度：一方面指瀏覽者對于站點的信任程度,另一方面指搜索引擎對于網(wǎng)站的信任值（TrustRank）,網(wǎng)站信任度對于企業(yè)站點更為重要.在得到更高信任度的同時,流量更容易轉(zhuǎn)化為實在的收入.2008-10-10
這篇文章主要為大家詳細介紹了微信小程序自定義底部彈出框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
thinkjs微信中控之微信鑒權(quán)登陸的實現(xiàn)代碼
這篇文章主要介紹了thinkjs微信中控之微信鑒權(quán)登陸的實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08