一个 friend 让我帮助他制作一个表单,他的一个客户想要使一个表单更加动态......我的 JavaScript 充其量是最少的,因为我刚刚开始学习。
他问我一些类似“如何让表单仅在选择某个选项时才显示另一个下拉菜单”
在他给我的示例中,默认情况下,当页面加载时,他有一个下拉菜单,其中有 2 个选项,曼哈顿,选项二是布鲁克林。
如果选择曼哈顿,这将揭示曼哈顿的另一个带有 zipper 的下拉菜单,如果布鲁克林选择与 BK 相同。
在示例 html 中,类似这样的内容:
<div>
<form>
<select name="boro" id="boro">
<option value="manhattan" id="manh">Manhattan</option>
<option value="brooklyn" id="brook">Brooklyn</option>
</select>
</form>
<br/>
<div id="empty2fill"></div><!-- for showing chosen results -->
</div>
我想定位/捕获用户在上面的下拉菜单中选择的选项,然后激活此功能(如下)。
根据他的要求,我猜 id 要做的是(作为新手),然后就 .js 而言(伪代码):
<script type="text/javascript">
function valBoro (){
if( brook is chosen){ document.getElementById('empty2fill').innerHTML=" new dropdown code here")
}
}
</script>
除了不知道之外,我的主要问题是我不知道如何将菜单中选择的选项定位到此后,应用该功能(稍后会写)
非常感谢任何想法、提示等。 提前致谢
最佳答案
另一个选项是创建两个下拉列表并将样式显示设置为“无”。然后您可以捕获 onChange 事件并根据 select 元素的值将 display 设置为“”。
function showZip() {
var boro = document.getElementById("boro");
if (boro.value == "manhattan") {
var zipManhattan = document.getElementById("zipManhattan");
zipManhattan.style.display = "";
}
}
在 html 中
<div>
<select name="boro" id="boro" onchange="javascript:showZip();">
<option value="manhattan" id="manh">Manhattan</option>
<option value="brooklyn" id="brook">Brooklyn</option>
</select>
<br/>
<select name="zipManhattan" id="zipManhattan" style="display:none;">
<option value="zip1" id="zip1">1111</option>
<option value="zip2" id="zip2">2222</option>
</select>
<div id="empty2fill"></div><!-- for showing chosen results -->
</div>
关于javascript - 如何使用js从下拉菜单中定位一个选项以应用更多代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7637876/