更改select内option的属性

最新推荐文章于 2021-04-16 19:03:17 发布

w93223010

最新推荐文章于 2021-04-16 19:03:17 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： function button input html

本文链接：https://blog.csdn.net/w93223010/article/details/8083992

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

帮一位友人解决了一个小问题，需求是更改选中选项卡内显示的文本值，新值存放在某个文本框内

初始窗口

<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 οnclick="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 οnclick="modify();">修改</button>
 </body>
</html>