通过下拉框来显示对应的内容。_html/css_WEB-ITnose
比如，我有下拉框
<select name="select"> <option>--请选择--</option> <option value="1">显示内容1</option> <option value="2">显示内容2</option> <option value="3">显示内容3</option> </select>
比如我选择下拉框“显示内容1”，就在右边显示内容1相关的内容。。
比如我选择下拉框“显示内容2”，就在右边显示内容2相关的内容。。
求html代码。。
回复讨论(解决方案)
右边 是什么
右边 是什么
右边就是显示的内容，随便是什么都可以。
非常感谢。
<!DOCTYPE html><html><head><script>function changeValue(e){if(e.selectedIndex!=0){document.getElementById("showValue").value=e.options[e.selectedIndex].text;}else{document.getElementById("showValue").value='';}}</script></head><body><select name="select" onchange="changeValue(this)"> <option>--请选择--</option> <option value="1">显示内容1</option> <option value="2">显示内容2</option> <option value="3">显示内容3</option> </select><input type="text" id="showValue" /></body></html> <script></script>
<script> <br /> $(document).ready(function(){ <br /> $("#sel").change(function(){ <br /> var flag = $(this).val(); <br /> switch(flag){ <br /> case '1': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> case '2': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> case '3': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> default: <br /> $("div").hide(); <br /> alert("未选择"); <br /> } <br /> }); <br /> }); <br /> </script>
如果要设置一个默认显示内容怎么办，比如什么都不选择的时候。。。
显示content0
<script></script>
<script> <br /> $(document).ready(function(){ <br /> $("#sel").change(function(){ <br /> var flag = $(this).val(); <br /> switch(flag){ <br /> case '1': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> case '2': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> case '3': <br /> $("#content"+flag).show().siblings('div').hide(); <br /> break; <br /> default: <br /> $("div").hide(); <br /> alert("未选择"); <br /> } <br /> }); <br /> }); <br /> </script>
比如默认请选择的情况下，下面显示一个默认的内容。？
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML中起始标签的示例是什么？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
Gitee Pages静态网站部署失败：单个文件404错误如何排查和解决？
Apr 04, 2025 pm 11:54 PM
GiteePages静态网站部署失败：404错误排查与解决在使用Gitee...
网页批注如何实现Y轴位置的自适应布局？
Apr 04, 2025 pm 11:30 PM
网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能，特别是如何处理批注之间的间�...
HTML，CSS和JavaScript：Web开发人员的基本工具
Apr 09, 2025 am 12:12 AM
HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。
如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？
Apr 05, 2025 am 06:15 AM
实现图片点击后周围图片散开并放大效果许多网页设计中，需要实现一种交互效果：点击某张图片，使其周围的...
