Question

三件事：选择框1，输入框，选择框2 根据选择框1 （下拉列表1）中的选项，我希望输入框可见或选择框2 可见，但不是两者。

任何帮助都会很棒:)我根据选择框1中的选项填充选择框2中的选项，但有时用户的选择使他们有权输入任何内容作为输入，而不是仅从列表中选择值。

有谁知道如何隐藏/显示或添加/删除页面中的这些元素？如果我在每次选择更改时创建一个新的输入框或选择框2 ，它会或多或少相同，只是销毁最后一个？

基于其他一些问题，我注意到我可以改变风格：没有像这里一样 StackOverflow> Replacing a dropdown menu with a text menu
这是最理想的方式吗？

我还在学习js / DOM的基础知识，所以非常感谢任何帮助（和解释）！

Answer 1

这会隐藏一个元素：

style="display:none;"

这将显示一个元素：

style="display:block;"

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

BTW，使用JQuery时，这种工作变得更加容易。（但它确实可以防止你学习DOM的某些部分，如果那是你真正的目标。）

您还可以使用CSS类来实现相同的目标，如果您想一次更改许多样式属性，则效果会更好。（JQuery将使用addClass，removeClass或toggleClass函数。）

完全不同的方法：

也许您真正想要的是混合文本框/下拉列表，称为自动提示文本框。它可以让你选择一个值，同时也允许在需要时自由输入。

Answer 2

<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>

使用javascript替换选择选项（下拉菜单）中的输入字段

2 个答案: