HTML/JS：如何使用 JS 更改选择类型的选项值答案

【问题标题】：HTML/JS: How to change option value of select type using JSHTML/JS：如何使用 JS 更改选择类型的选项值
【发布时间】：2012-01-03 17:18:39
【问题描述】：

我一直在试图弄清楚如何为选择类型中的选项设置值。但无论我多么努力理解，我就是无法（感到羞耻）..

所以我希望你们能帮助我，因为你们以前帮助过我很多次.. :)

假设我们有：

<select name="box" id="test">    
<option value='tval'>Content</option>

下一个代码不应该将文本从“内容”更改为“框”吗？

function changeContent(form){
form.document.getElementById('test').options['tval'].value = 'box';
}

或者我在这里完全错了吗？我查了很多不同的文章，但没有人能帮助我理解如何做到这一点..

谢谢大家！

【问题讨论】：

【解决方案1】：

如果您需要更改文本而不是值；

function changeContent(){
     document.getElementById('test').options[0].text = 'box';
}

同时设置值和文本；

function changeContent(){
     var opt= document.getElementById('test').options[0];
     opt.value =  'box';
     opt.text = 'box';
}

【讨论】：

试过了，不行。当你是新手时会很棘手.. =) 谢谢你的回答=)
@Mr.Havoc 可能是因为你在做form.document，试试document.getEle...
谢谢.. 表格。问题是……这是为什么？ JS 和 HTML 在不同的文件中... 困惑感谢所有回答的人！
@Mr.Havoc 我假设 form 是一个 DOM 元素，因此该对象无法访问 document 变量（form.document 可能在您的控制台中引发了 Javascript 错误），仅出现在window.document 中，或者只是放在document 中。
@Mr.Havoc 点击地址栏旁边的扳手，进入工具 > Javascript 控制台

【解决方案2】：

不，value 是选项元素的实际值，用户提交表单时会发送什么。您尝试访问的是选项元素的 HTML，您必须使用以下内容访问它：

form.document.getElementById('test').options['tval'].innerHTML='box'

【讨论】：

【解决方案3】：

这会将值从“tval”更改为“box”

我认为您正在寻找的是选项的内部文本。

W3CSchools.com 有一个您在 javascript 中寻找的示例。你确实想要 javascript，对吗？

【讨论】：

【解决方案4】：

删除form. 部分并使用：

document.getElementById('test').options[0].innerHTML = 'box';

【讨论】：

【解决方案5】：

你应该在这里使用选项的索引。这是工作示例http://jsfiddle.net/LaMJ9/

代码

document.getElementById('test').options[0].value = 'box';

编辑

在 jsfiddle http://jsfiddle.net/LaMJ9/1/ 上添加了以前值和新值的警报

【讨论】：