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

将选择选项(下拉菜单)中的输入字段替换为javascript

drop-down-menu replace select javascript

sova · 技术社区 · 16 年前

三件事: 选择框1,输入框,选择框2 .
根据中的选择 选择框1 (下拉列表1),我想要 输入框 可见或 选择框2 是可见的,但不是两者都可见。

任何帮助都很好:)我正在根据选择框1中的选项填充选择框2中的选项,但有时用户的选择允许他们输入任何内容作为输入,而不仅仅是从值列表中选择。

有人知道我如何隐藏/显示或从页面添加/删除这些元素吗?如果我让它创造一个新的 输入框 或 选择框2 每次选择发生变化,就销毁最后一个?

基于其他一些问题,我注意到我可以改变风格:这里没有这样的。
StackOverflow> Replacing a dropdown menu with a text menu
这是最可取的方法吗?

我仍然在学习JS/DOM的基础知识,因此任何帮助(和解释)都将非常感谢!

2 回复 | 直到 16 年前

Sage 16 年前

<select name='field' id='field' size='1' onchange='checkthis(this);'>
 <option>please select something</option>
 <option value='1'>1</option>
 <option value='2'>2</option>
 <option value='3'>3</option>
 <option value='4'>4</option>
</select>
<input type='text' id='text1' name='text1' value='' />

<select name='field2' id='field2' size='1'>
 <option>please select something</option>
 <option value='1'>1</option>
 <option value='2'>2</option>
 <option value='3'>3</option>
 <option value='4'>4</option>
</select>

<input type='button' id='button' value='Click Me' />

<script language='javascript' type='text/javascript'>
function checkthis(fld) {
 switch (fld.selectedIndex) {
  case 0:
   document.getElementById("text1").style.display = "none";
   document.getElementById("field2").style.display = "block";
   break;
  case 1:
   document.getElementById("text1").style.display = "block";
   document.getElementById("field2").style.display = "block";
   break;
  case 2:
   document.getElementById("text1").style.display = "block";
   document.getElementById("field2").style.display = "none";
   break;
  case 3:
   document.getElementById("text1").style.display = "none";
   document.getElementById("field2").style.display = "none";
   break;

 }
}
</script>

John Fisher 16 年前

这将隐藏一个元素:

style="display:none;"

这将显示一个元素:

style="display:block;"

您可以使用一个javascript函数来处理onchange事件,该函数将确定要隐藏或显示哪个元素,然后更改相应元素的样式。

顺便说一句,在使用jquery时,这种工作要容易得多。(但是,如果这是您的真正目标,那么它确实可以防止您学习DOM的某些部分。)

您还可以使用CSS类来实现相同的目标,如果您希望同时更改许多样式属性,那么这一目标会更好地发挥作用。(jquery将使用addClass、removeClass或toggleClass函数。)

完全不同的方法:

也许你真正想要的是一个混合文本框/下拉框,称为自动建议文本框。它允许您选择一个值,同时允许在需要时自由键入。