cari

Rumah  >  Artikel  >  hujung hadapan web  >  js pelaksanaan Pilih contoh menu senarai dengan kemahiran introduction_javascript

js pelaksanaan Pilih contoh menu senarai dengan kemahiran introduction_javascript

WBOY
WBOYasal
2016-05-16 15:44:271371semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan js bagi menu senarai Pilih dengan pengenalan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kod kesan khas menu senarai dengan pengenalan bukan menu navigasi Ia adalah menu senarai lungsur yang biasa digunakan dalam borang Nama menu dan pautan yang ditakrifkan di dalamnya boleh diubah suai oleh anda Fungsi penerangan telah ditambah Tetikus Apabila anda mengklik pada kandungan dalam senarai, pengenalan kepada kandungan ini akan muncul, dan kandungan dalam kotak teks juga akan berubah dengan sewajarnya.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js melaksanakan bar Borang untuk memaparkan kemahiran code_javascript kesan jam masa format penuhArtikel seterusnya：js melaksanakan bar Borang untuk memaparkan kemahiran code_javascript kesan jam masa format penuh

Artikel berkaitan

Lihat lagi