代码之家 › 专栏 › 技术社区 › mpen

更改的值显示:无输入?

html javascript

mpen · 技术社区 · 14 年前

<input type="text"> display:none ? 我有一些JS,当输入是 <input type="hidden"> 显示:无

基本上,我想替换一个 <input> 用一个 <select> ,所以我试图隐藏它并附加 <选择>

看一看 http://jsfiddle.net/5ZHbn/

<选择> 有萤火虫的元素。看看它旁边隐藏的输入。更改select的值。隐藏的输入不会改变。萤火虫在骗我吗?

如果您取消对其他代码行的注释,那么它就可以工作。

事实上。。。我很肯定是

6 回复 | 直到 14 年前

Jody Donetti 9 年前

我想是萤火虫。

,就是那个萤火虫 不反映更新的值 在 html选项卡 .

事实上,使用 dom选项卡 即使实际节点的值在

如果你使用 “通常隐藏”

我认为这是Firebug中的一个bug,它似乎不会更新元素的值,如果它通常是可见的,但是现在用css隐藏了:我特别这么说,因为type=“hidden”的输入和显示:无尽管如此,这并不是一个简单的元素隐藏问题显示:无。

希望这有帮助,我要把这个虫子发给萤火虫。

更新:我在winsrv2k3上使用firefox8上的Firebug 1.8.4。

Matchu 14 年前

dionyziz 14 年前

您可以像往常一样更改它:

document.getElementById( 'myinput' ).value = 'Hello';

igrossiter 10 年前

我知道我的答案是尊重,我试图发表评论,但没有足够的声誉。希望它能帮助别人。

Building429 14 年前

您可以选择将输入框放入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>

Serge 6 年前

要使更改可见,可以通过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>