javascript 更改显示值：无输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3527091/
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
Change value of display:none input?
提问by mpen
Is it possible to change the value of an <input type="text">that has been hidden with a style of display:none? I have some JS that seems to work when the input is <input type="hidden">but not when it's hidden with display:none. And AFAIK, you can't change an input's type with JS either.
是否可以更改<input type="text">已隐藏样式的an 的值display:none？我有一些 JS 似乎在输入时有效，<input type="hidden">但在使用 .js 隐藏时无效display:none。而且 AFAIK，您也无法使用 JS 更改输入的类型。
Basically, I want to replace an <input>with a <select>, so I'm trying to hide it and append the <select>element.
基本上，我想<input>用 a替换 an <select>，所以我试图隐藏它并附加<select>元素。
Take a look at http://jsfiddle.net/5ZHbn/
Inspect the <select>element with firebug. Look at the hidden input beside it. Change the select's value. The hidden input doesn't change. Is Firebug lying to me?
<select>用萤火虫检查元素。查看它旁边的隐藏输入。更改选择的值。隐藏的输入不会改变。Firebug 是在骗我吗？
If you uncomment the other lines of code, then it works.
如果您取消注释其他代码行，则它可以工作。
Actually... I'm pretty sure it isa bug in Firebug now. Most other things correctly update, but firebug doesn't show the updated value when I inspect it.
实际上...我很确定它现在是Firebug 中的一个错误。大多数其他事情都正确更新，但是当我检查它时，萤火虫没有显示更新的值。
回答by njy
I think it's a Firebug bug.
我认为这是一个 Firebug 错误。
That's because if i query (via the console) the value of the input-text field it is in fact updated, it's simply that Firebug doesn't reflect the updated valuein the html-tab.
这是因为，如果我查询（通过控制台）输入文本字段它的价值其实更新，它仅仅是萤火虫不反映更新的值在HTML标签。
In fact, using the dom-tabthe new value is there, even if the actual node's value in the html-tabwas not updated.
事实上，使用dom-tab新值就在那里，即使html-tab 中实际节点的值没有更新。
This seems to happen if you use a "normally visible"element (like an input type="text") or similar. If you, instead, use an "normally hidden"element (like an input type="hidden"), Firebug update its value normally.
如果您使用“正常可见”元素（如输入类型 =“文本”）或类似元素，这似乎会发生。相反，如果您使用“通常隐藏”的元素（如输入类型 =“隐藏”），Firebug 会正常更新其值。
I think it's a bug in Firebug, that seems to not update an element's value if it is normally visible but now hidden with css: i'm saying specifically this, because an input with type="hidden" anddisplay:none is updated nonetheless, so it's not simply a problem of elements hidden via display:none .
我认为这是 Firebug 中的一个错误，如果它通常可见但现在用 css 隐藏，它似乎不会更新元素的值：我专门说这个，因为 type="hidden"和display:none的输入仍然更新，所以这不仅仅是通过 display:none 隐藏元素的问题。
Hope this helps, i'm about to issue this bug to the Firebug guys.
希望这会有所帮助，我即将向 Firebug 人员发布此错误。
UPDATE: i'm using Firebug 1.8.4 on Firefox 8 on Win Srv 2K3.
更新：我在 Win Srv 2K3 上的 Firefox 8 上使用 Firebug 1.8.4。
回答by Matchu
Changing a field's value should work as expected, regardless of any CSS styling. The issue is likely elsewhere.
无论任何 CSS 样式如何，更改字段的值都应按预期工作。这个问题很可能在其他地方。
回答by dionyziz
You can change it as usual:
您可以照常更改它：
document.getElementById( 'myinput' ).value = 'Hello';
回答by igrossiter
I got this problem when customizing a magento custom option field, I made some rules from some custom select inputs and needed to save the final value to a hidden custom option text field. For some reason, it didn't work if the field was 'display:none' (maybe due some magento's js?), but it worked when I changed to "visibility: hidden;"
我在自定义 magento 自定义选项字段时遇到了这个问题，我从一些自定义选择输入中制定了一些规则，并需要将最终值保存到隐藏的自定义选项文本字段中。出于某种原因，如果该字段为“display:none”（可能是由于某些 magento 的 js？），则它不起作用，但是当我更改为“visibility: hidden;”时它起作用了。
I know my answer is to especific, I tried to make a comment but don't have enough reputation. Hope it helps someone.
我知道我的答案是特定的，我试图发表评论但没有足够的声誉。希望它可以帮助某人。
回答by Serge
To make changes visible, you can set the value by SetAttribute
要使更改可见，您可以通过 SetAttribute 设置值
var inputs = document.querySelectorAll('input');
var select = document.querySelector('select');
select.onchange = function () {
inputs[0].value = select.value;
inputs[1].setAttribute('value', select.value);
console.log('changed by input.value: ', inputs[0]);
console.log('changed by input.setAttribute: ', inputs[1]);
};<input type="text" style="display: none;" value="">
<input type="text" style="display: none;" value="">
<select>
<option>Select value</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>回答by Building429
One option you have is putting the input box inside a div and then using javascript to change the contents of the div. For example:
一种选择是将输入框放在 div 中，然后使用 javascript 更改 div 的内容。例如：
<html>
<head>
<title>Input Text To Dropdown Box</title>
<script type="text/javascript">
function swap() {
document.getElementById("contentswap").innerHTML = "<select><option value='cats'>Cats</option><option value='dogs'>Dogs</option></select>";
}
</script>
<style>
#contentswap {
display:inline;
}
</style>
</head>
<body
<div id="contentswap">
<input type="text" name="original">
</div>
<br />
<input type="button" value="Input To Select" onClick="swap()">
</body>
</html>
