可按拼音首字母查找的上拉框 _Web前端

可按拼音首字母查找的下拉框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>select按拼音查找 可按拼音首字母查找的下拉框</title>
<style type="text/css">
	.text{width:200px; background:url(up.gif) no-repeat right; border:1px solid #9CAEE7; cursor:pointer;}
	.select{width:210px; margin:-2px; position:absolute; display:none; }
</style>
</head>

<body>
<script src="toAsc.js"  language="vbscript"></script>
<script src="pinyin.js" language="javascript"></script>
<table border="1"><tr><td>
<input class="text" type="text" id="fr" valueID="viewOption" onfocus="javascript:sfocus(this)" onblur="javascript:sblur(this)" onkeyup="javascript:s(this)"  /><br />
<select class="select" name="ff" id="viewOption" valueID="fr" onblur="javascript:schange(this)" onchange="javascript:schange(this)" multiple="multiple" size="12"  ></select>
</td></tr></table>
 
<table border="1"><tr><td>
<input class="text" type="text" id="fr1" valueID="viewOption1" onfocus="javascript:sfocus(this)" onblur="javascript:sblur(this)" onkeyup="javascript:s(this)"  /><br />
<select class="select" name="ff" id="viewOption1" valueID="fr1" onblur="javascript:schange(this)" onchange="javascript:schange(this)" multiple="multiple" size="12"  ></select>
</td></tr></table>
<script type="text/javascript">
  function buildCaseCategoryBox(name){	 
   var html = '<select id="' + name + '" name="' + name + '">'
   +'<option value="000">不限</option>'
   +'<option value="010000">危害国家安全案</option>'
   +'<option value="010099">危害国家安全案</option>'
   +'<option value="010110">背叛国家案</option>'
   +'<option value="010120">分裂国家案</option>'
   +'<option value="010160">颠覆国家政权案</option>'
   +'<option value="010170">煽动颠覆国家政权案</option>'
   +'<option value="010180">资助危害国家安全案</option>'
   +'<option value="010199">其它背叛国家案</option>'
   +'<option value="010200">叛变、叛逃案</option>'
   +'<option value="010210">投敌叛逃案</option>'
   +'<option value="010220">叛逃案</option>'
   +'<option value="010299">其它叛变、叛逃案</option>'
   +'</select>'
   return html;
}
  
document.write(buildCaseCategoryBox("baseData"));//创建select
document.write(buildCaseCategoryBox("baseData1"));//创建select

addPinyin('viewOption','baseData');//参数1 表示下拉框架的ID 2.表示数据的下拉框ID

addPinyin('viewOption1','baseData1');

//
</script>
</body>

</html>

?可按拼音首字母查找的下拉框HTML

toAsc.js 这个JS用VB Script来转换汉字的ASC码这个JS很重要。

function toAsc(str)
	toAsc = hex(asc(str))
end function

网上有很多类似的汉字拼音的首字母查询的案例。

很大一部分都是在数据库表中另加拼音字段或用java代码转换成拼音，然后用ajax后台查询的方式来实现。

可直接使用的完整代码参见附件。