本文实例讲述了JS更改select内option属性的方法。分享给大家供大家参考。具体如下：
帮一位友人解决了一个小问题，需求是更改选中选项卡内显示的文本值，新值存放在某个文本框内
初始窗口：
<html>
<head>
<title>原窗口</title>
[removed]
var parentValue=""; //全局变量，用于保存点击详情时select中指定opeion的值
function detail() {
var select=document.getElementById('SHGX'); //获得select对象
parentValu
在JavaScript中，对HTML元素进行操作是常见的任务之一，特别是在动态更新页面内容的时候。本例主要探讨了如何使用JavaScript来更改`<select>`元素内的`<option>`属性，特别是其文本值。以下是对这个实例的详细说明：
我们有一个包含`<select>`元素的HTML页面，`<select>`元素具有一个id为'SHGX'，并且包含多个`<option>`标签。每个`<option>`都有自己的`value`和`title`属性，用于存储不同的值和提示信息。
```html
<select id='SHGX'>
<option value='111' title='夫'>夫</option>
...
</select>
```
在这个例子中，`detail()`函数用于获取当前选中的`<option>`的文本值，并将其存储在全局变量`parentValue`中。然后打开一个新的窗口，通常用于显示详细信息或进行编辑。
```javascript
function detail() {
var select = document.getElementById('SHGX');
parentValue = select.options[select.selectedIndex].text;
window.open('详情窗口.html');
}
```
新窗口（'详情窗口.html'）中，用户可以在输入框中输入新的值，然后调用`modify()`函数。这个函数获取输入框的值，并通过`opener`对象调用父窗口的`updateSelect()`函数，传递新值。
```html
<input id="text_01" type="text" value=""/>
<button onclick="modify();">修改</button>
```
```javascript
function modify() {
var childValue = document.getElementById('text_01').value;
opener.updateSelect(childValue);
}
```
在父窗口中，`updateSelect(childValue)`函数接收新值并遍历`<select>`元素的所有`<option>`。如果找到与`parentValue`匹配的`<option>`，就更新它的文本值为`childValue`。
```javascript
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;
}
}
}
```
这个例子展示了JavaScript如何跨窗口通信以及如何动态更新DOM元素的属性。它对于实现交互式Web应用程序非常有用，例如在用户交互后更新数据或者在不同页面之间传递信息。通过理解这个示例，开发者可以更熟练地处理HTML表单和元素的动态操作，从而提高用户体验。在实际开发中，可以将这种技术应用于更复杂的数据交互场景，比如用户配置、数据验证等。
