Javascript 检测选项值的代码无法按预期工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6070151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Code to detect option value does not work as expected
提问by urema
I was attempting to do some string comparisons in javascript. I have seen several tutorials and examples but they do not seem to work. I am missing something fundamental?
我试图在 javascript 中进行一些字符串比较。我看过几个教程和示例，但它们似乎不起作用。我错过了一些基本的东西？
Attempt 1
尝试 1
function addAspect(aspect) {
var print = document.createElement('p');
var ptext;
if (aspect == "Option1") ptext = document.createTextNode("This is option1");
}
Doesnt work.
不工作。
Then I found this example to which all readers said it worked fine
然后我找到了这个例子，所有读者都说它工作得很好
function addAspect() {
var print = document.createElement('p');
var ptext;
var aspect = String(document.getElementById("aspectResult").value);
if (aspect == "Option1") ptext = document.createTextNode("This is option1");
}
Doesnt work.
不工作。
I also tried .toString()as well as the '==='exact match comparison.
我也试过.toString()还有'==='精确的匹配比较。
Full code
完整代码
<html>
<head>
<script type="text/javascript">
function addAspect()
{
var print = document.createElement('p');
var ptext;
var aspect = document.getElementById("aspectResult").value;
if (aspect == "Option1"){
ptext = document.createTextNode("This is option1");
}
print.appendChild(ptext);
document.getElementById("mainBlock").appendChild(print);
}
</script>
</head>
<body>
<form>
<select id="aspectResult">
<option value="Option1">Option1</option>
</select>
<input type="button" value="Check" onclick="addAspect()"/>
</form>
<span id="mainBlock"> </span>
</body>
</html>
Any suggestions?
有什么建议？
回答by Ja?ck
First, a small introduction to how dropdowns work:
首先，简要介绍下拉菜单的工作原理：
<select id="aspectResult">
<option value="Option1">Option1</option>
</select>
To read the selected value from the dropdown, you should do this:
要从下拉列表中读取选定的值，您应该这样做：
var dropdown = document.getElementById('aspectResult'),
selectedValue = dropdown.options[dropdown.selectedIndex].value;
Then, you create the <p>element with a text node inside:
然后，创建<p>包含文本节点的元素：
var p = document.createElement('p'),
txt;
if (selectedValue == 'Option1') {
txt = document.createTextNode('This is option 1');
}
Afterwards, you can append the newly created paragraph to the container of your choice:
之后，您可以将新创建的段落附加到您选择的容器中：
var container = document.getElementById('mainBlock');
if (txt) {
p.appendChild(txt);
container.appendChild(p);
}
回答by Andy E
Your function creates a text node but then does nothing with it, so you code appearsto do nothing at all. You need to append the text node to an element somewhere in the DOM:
您的函数创建了一个文本节点，但随后什么也不做，因此您的代码似乎什么也没做。您需要将文本节点附加到 DOM 中某处的元素：
document.body.appendChild(ptext);
Your full code appears to be working fine in IE9, Firefox 4 and Chrome 11. See http://jsbin.com/ekura5/.
您的完整代码在 IE9、Firefox 4 和 Chrome 11 中似乎运行良好。请参阅http://jsbin.com/ekura5/。
回答by Brett Zamir
If you are trying to add the ptextto the paragraph, you need to add two lines to the end:
如果您尝试ptext在段落中添加 ，则需要在末尾添加两行：
function addAspect(aspect) {
var prnt = document.createElement('p');
var ptext;
if( aspect == "Option1" ) {
ptext = document.createTextNode("This is option1");
prnt.appendChild(ptext); // Add the text to the paragraph
document.body.appendChild(prnt); // Add the paragraph to the document
}
}
