communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > 通过下拉框来显示对应的内容。_html/css_WEB-ITnose

通过下拉框来显示对应的内容。_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 12:24:41
original
2072 Les gens l'ont consulté

比如，我有下拉框 

<select name="select">    <option>--请选择--</option>    <option value="1">显示内容1</option>    <option value="2">显示内容2</option>    <option value="3">显示内容3</option>  </select>
Copier après la connexion


比如我选择下拉框“显示内容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>
Copier après la connexion

<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>
  
  
  


      
  
content1

  
content2

  
content3

  

如果要设置一个默认显示内容怎么办，比如什么都不选择的时候。。。
显示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>
  
  
  


      
  
content1

  
content2

  
content3

  

比如默认请选择的情况下，下面显示一个默认的内容。？
Étiquettes associées：
通过下拉框来显示对应的内容。
source：php.cn
Article précédent：css3 这个三角怎么旋转_html/css_WEB-ITnose Article suivant：<s:checkboxlist>的问题_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
flex css - élément de clip après une certaine hauteur au lieu de l'envelopper Les bordures représentent la hauteur et la largeur statiques. Je souhaite que les éléments...
Depuis 2024-04-01 14:02:02
0
1
396
Modifier le texte créé dynamiquement en Javascript Je crée une "Section de commentaires sur les réseaux sociaux" (vous pouvez ajout...
Depuis 2024-03-31 14:17:41
0
1
364
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal