1

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

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

我正在使用原型框架。

4

4 回答 4

1

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

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

于 2012-04-12T14:43:24.973 回答
0

像这样的东西？ 

"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>
于 2012-04-12T14:46:21.957 回答
0

这是原型几乎没有任何价值的例子之一。这是我将如何处理这个问题：

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

演示。

如果你真的坚持原型化：

​$("test").onchange = function () {
    var val = this.options[this.selectedIndex].value;
    $("otherTb").style.display = (val == "other") ? "block" : "none";  
};​​​
于 2012-04-12T14:48:49.567 回答
0

可能的香草解决方案

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' />";
    }
};

演示

于 2012-04-12T15:15:17.947 回答