suchen

Heim  >  Artikel  >  Web-Frontend  >  js-Implementierung eines Beispiels für ein Auswahllistenmenü mit Einführungskenntnissen in Javascript

js-Implementierung eines Beispiels für ein Auswahllistenmenü mit Einführungskenntnissen in Javascript

WBOY
WBOYOriginal
2016-05-16 15:44:271364Durchsuche

Das Beispiel in diesem Artikel beschreibt die js-Implementierung des Auswahllistenmenüs mit einer Einführung. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Code für Spezialeffekte im Listenmenü mit Einführung ist kein Navigationsmenü. Es handelt sich um ein Dropdown-Listenmenü, das häufig in Formularen verwendet wird. Der Unterschied besteht darin, dass a Die Beschreibungsfunktion wurde hinzugefügt. Wenn Sie auf den Inhalt in der Liste klicken, wird eine Einführung zu diesem Inhalt angezeigt und der Inhalt im Textfeld ändert sich entsprechend.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-info-select-menu-codes/

Der spezifische Code lautet wie folgt: 

<html>
<head>
<title>带有说明的导航栏</title>
</head>
<body>
<script language="JavaScript"> 
<!--
function herfto(){
  if (document.stationform.refsel.options[0].selected){ //根据用户选定的项目
    window.location.href = "http://www.jb51.net";} //改变本窗口的地址
  else if (document.stationform.refsel.options[1].selected)
  {  window.location.href = "http://www.sina.com.cn";}
  else if (document.stationform.refsel.options[2].selected)    
  {  window.location.href = "http://www.sohu.com";} 
  else if (document.stationform.refsel.options[3].selected)    
  {  window.location.href = "http://www.163.com";} 
  else if (document.stationform.refsel.options[4].selected)    
  {  window.location.href = "http://www.5dcentury.com";} 
  else if (document.stationform.refsel.options[5].selected)    
  {  window.location.href = "http://www.chinaren.com";}  
  else if (document.stationform.refsel.options[6].selected)    
  {  window.location.href = "http://cn.yahoo.com";} 
 //根据可选条目，这里应该相应的增减。
  return true; 
  }
function textValue(){ 
  var stationInteger, stationString  
  stationInteger=document.stationform.refsel.selectedIndex //取得选定项目的编号
  stationString=document.stationform.refsel.options[stationInteger].title //根据编号取得相应说明
  document.stationform.stationtext.value = stationString } //将说明显示出来
//-->
</script>
<form name="stationform">
<select name="refsel" onChange="textValue()" multiple size="5">
<option title="一个提供优质脚本代码的网站">脚本之家
<option title="相当不错的虚拟社区">新浪sina
<option title="不用说，要搜索来这里就对了">搜狐
<option title="提供免费个人主页空间">网易163
<option title="一个优秀的学生网站">世纪学苑
<option title="首创同学录，中国学生的聚会场所">中国人
<option title="世界闻名的搜索巨头">雅虎yahoo
</select>
<p>
<input type="button" name="stationbutton" value="Go!" onClick="herfto()" 
style="background-color: #FFFFFF; border: 1 solid #000000">
<p><input type="text" name="stationtext" value="" size="30" maxlength="35" style="border: 1 solid #000000">
</form>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js implementiert die Formularleiste, um die Code_Javascript-Kenntnisse im Vollformat anzuzeigenNächster Artikel：js implementiert die Formularleiste, um die Code_Javascript-Kenntnisse im Vollformat anzuzeigen

In Verbindung stehende Artikel

Mehr sehen