집 > 기사 > 웹 프론트엔드 > Introduction_javascript 기술을 사용하여 목록 선택 메뉴 예제의 Node.js 구현

Introduction_javascript 기술을 사용하여 목록 선택 메뉴 예제의 Node.js 구현

WBOY원래의: 2016-05-16 15:44:271371검색

이 문서의 예에서는 소개와 함께 목록 선택 메뉴의 js 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

소개된 선택 목록 메뉴 특수 효과 코드는 탐색 메뉴가 아니며, 양식에서 일반적으로 사용되는 드롭다운 목록 메뉴이며, 여기에 정의된 메뉴 이름과 링크는 사용자가 직접 수정할 수 있다는 점입니다. 설명 기능이 추가되었습니다. 마우스 목록의 콘텐츠를 클릭하면 해당 콘텐츠에 대한 소개가 팝업되며, 텍스트 상자의 콘텐츠도 그에 따라 변경됩니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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

구체적인 코드는 다음과 같습니다.

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

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：Node.js는 전체 형식의 시간 시계 효과 code_javascript 기술을 표시하기 위해 양식 표시줄을 구현합니다.다음 기사：Node.js는 전체 형식의 시간 시계 효과 code_javascript 기술을 표시하기 위해 양식 표시줄을 구현합니다.

Introduction_javascript 기술을 사용하여 목록 선택 메뉴 예제의 Node.js 구현

관련 기사