用js或者jq实现，根据下拉菜单的字段来显示对应的内容?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用js或者jq实现，根据下拉菜单的字段来显示对应的内容?相关的知识，希望对你有一定的参考价值。
下拉菜单有一班，二班，三班，四班，如果选择下拉菜单的一班选项，则显示一班的学生名单，这个功能怎么实现？
用ajax取得对应地址的数据，怎么只显示想要的数据
在下拉菜单的change事件中，获得当前选择班级的标识，再从数据源中匹配这个标识的班级数据并展示
<body><select id="class">
<option value="一班">一班</option>
<option value="二班">二班</option>
<option value="三班">三班</option>
</select>
<div id="classStudent"></div>
<script>
var data =
'一班': '张三,李四',
'二班': '周五,郑六',
'三班': '田七,王八'
;
//js
document.getElementById("class").addEventListener("change",function()
document.getElementById("classStudent").innerhtml = data[this.value];
);
//jquery
/*
$("#class").change(function()
$("#classStudent").html(data[this.value])
)
*/
</script>
</body> 参考技术A ajax直接发送post请求道服务器，服务器返回所需数据，然后再ajax执行成功的回调函数中将返回的数据动态的画到界面中（可采用操作dom方式）
在联系表 7 中选择下拉菜单后显示输入字段
【中文标题】在联系表 7 中选择下拉菜单后显示输入字段【英文标题】：show input field once drop down is selected in Contact Form 7 【发布时间】：2016-04-26 08:15:54 【问题描述】：大家好，我正在使用 Wordpress Contact Form 7 插件并尝试实现：如果选择下拉“其他”则显示文本字段
在联系表格 7 中添加 dropdown 作为 id 后，我现在通过 Wordpress 页面中的 Visual composer 使用以下原始 JS：
var x = document.getElementById("dropdown");
if(x.value = "Other")
alert('Enter your js here!');
【问题讨论】：
Show Form Field if Drop Down Item is Selected Using jquery的可能重复 正如我所提到的，我使用的是联系表格 7（Wordpress 插件），我无法控制联系表格的 HTML wordpress.org/support/topic/… 是的，谢谢 Lalji 【参考方案1】：适合任何寻求更简单解决方案的人。在联系表格 7 中，您可以简单地添加内联 JavaScript。
只要您不在脚本中添加空行，添加到表单构建器的 JavaScript 就会在前端呈现。
这是来自 CF7 表单编辑器的副本：
<label> Your Name (required)
[text* your-name] </label>
<label> Your Email (required)
[email* your-email] </label>
<label> Your Favorite Color
[select drop-down-menu id:FavoriteColorDropDown "Pink" "Red" "Purple" "Other"] </label>
<label id="EnterFavoriteColorLabel"> Please Specify Your Favorite Color
[text favorite-color] </label>
[submit "Send"]
<script language="javascript" type="text/javascript">
// Hide the favorite-color text field by default
document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
// On every 'Change' of the drop down with the ID "FavoriteColorDropDown" call the displayTextField function
document.getElementById("FavoriteColorDropDown").addEventListener("change", displayTextField);
function displayTextField()
// Get the value of the selected drop down
var dropDownText = document.getElementById("FavoriteColorDropDown").value;
// If selected text matches 'Other', display the text field.
if (dropDownText == "Other")
document.getElementById("EnterFavoriteColorLabel").style.display = 'block';
else
document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
</script>
希望对您有所帮助。
如果您有兴趣阅读更多或扩展单选按钮的内容，我最近发表了一篇文章，其中包含更多代码示例和示例here。
【讨论】：
以上是关于用js或者jq实现，根据下拉菜单的字段来显示对应的内容?的主要内容，如果未能解决你的问题，请参考以下文章
用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）