Question

我想知道当用户从下拉列表中选择特定选项时，如何制作包含文本框的div（选择选项）

例如，大学将有一个选择选项，其中一个选项是其他选项，如果用户选择此选项，我想要一个包含文本框的div，如果不在列表中，则允许用户输入他们的大学

我正在使用原型框架。

Answer 1

如果您在更改时绑定选择，则可以在每次选择一个时比较所选值，如果所选值为“其他”，假设您的值与您的选项标签匹配，那么您可以触发额外的显示元件。

只是隐藏了页面中已有的元素，并将element.style.display从'none'切换为''（我将空字符串替换为block，因为您的元素可能不是块并将其设置为空字符串将显示值返回给定元素的默认值（内联，块...）

Answer 2

这样的事情？

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div{
    visibility:hidden;}


</style>
<script type="text/javascript">
function call(){
    var response = document.getElementById('Select').value;
    document.getElementById(response).style.visibility='visible';

    }
</script>

</head>

<body>

<select name="Select" id="Select" onChange="call()">
<option>1<option>
<option>2<option>
<option>3<option>
</select>
<div id="div1">Content for  id "div1" Goes Here</div>
<div id="2">Content for  id "2" Goes Here</div>
<div id="3">Content for  id "3" Goes Here</div>
</body>
</html>

Answer 3

这是原型几乎没有增值的实例之一。以下是我将如何处理这个问题：

document.getElementById("test").onchange = function () {
    var val = this.options[this.selectedIndex].value;
    document.getElementById("otherTb").style.display = (val == "other") ? "block" : "none";  
};

Demo.

如果你真的坚持原型化：

$("test").onchange = function () {
    var val = this.options[this.selectedIndex].value;
    $("otherTb").style.display = (val == "other") ? "block" : "none";  
};

Answer 4

可能的香草解决方案

HTML

<select id="university">
    <option value="foo">Something</option>
    <option value="other">Other</option>
</select>

<div id="other"></div>

的JavaScript

document.getElementById("university").onchange = function() {
    if (this.value == "other") {
        document.getElementById("other").innerHTML = "<input type='text' name='other' />";
    }
};

Demo

在用户更改下拉列表时使div可见

4 个答案: