js达成带有介绍的Select列表菜单实例,完毕列表与
分类:关于计算机

1意义预览
图片 1
2html代码

本文实例汇报了js实现带有介绍的Select列表菜单。分享给大家供我们参考。具体如下:

<tr> 
<td><img onclick="addType()" src="${msUrl}/images/logo/add.png">产品范围:</td> 
<td><select id="selectTypeOne" class="easyui-combobox" data-options="required:true"> 
<option>一级分类</option> 
</select> <select id="selectTypeTwo" class="easyui-combobox" data-options="required:true"> 
<option selected="selected">全部</option> 
</select></td> 
</tr> 
<tr height="20px"> 
<td></td> 
<td id="typeThree"></td> 
</tr> 
<tr height="30px"> 
<td></td> 
<td> 
<hr /></td> 
</tr> 

富含介绍的Select列表菜单特效代码,实际不是导航菜单,那是表单中常用的下拉列表菜单,里面定义的美食指南名称和链接都得以和谐修改,差异的是增添了贰个表明效果与利益,鼠标点击列表中内容的时候,会转换出本条内容的牵线,别的文本框内的情节也会随之变动。

 3js代码

运作效果截图如下:

$('#selectTypeOne').combobox({ 
url : config.urlMap.typeList, 
valueField : 'name', 
textField : 'name', 
required : true, 
width : '100', 
onSelect : function(row) { 
typeName1 = row.name 
$('#typeThree').html(""); 
$('#typeOneResult').html(""); 
$('#typeOneSubResult').html(""); 
subTypeName=[]; 
$('#selectTypeTwo').combobox({ 
url : config.urlMap.typeList + "?parent=" + row.id, 
valueField : 'name', 
textField : 'name', 
width : '100', 
required : true, 
onSelect : function(row) { 
typeName2 = typeName1 + ">" + row.name; 
$.getJSON(config.urlMap.typeList + "?parent=" + row.id, function(data) { 
var typeThreeName = "" 
for (var i = 0; i < data.length; i++) { 
typeThreeName += "<input onclick=clinkType("" + data[i].name + "") name='typeThree' value=" + data[i].name + " type='checkbox'>" + data[i].name 
} 
$('#typeThree').html(typeThreeName); 
$('#typeOneResult').html(typeName2 + ">"); 
$('#typeOneSubResult').html(""); 
subTypeName=[]; 
}); 
} 
}) 

} 
}); 
}) 
//删除下标元素方式一 
Array.prototype.remove = function(dx) { 
if (isNaN(dx) || dx > this.length) { 
return false; 
} 
for (var i = 0, n = 0; i < this.length; i++) { 
if (this[i] != this[dx]) { 
this[n++] = this[i] 
} 
} 
this.length -= 1 
} 
//删除数组元素方式二 
Array.prototype.baoremove = function(dx) { 
if (isNaN(dx) || dx > this.length) { 
return false; 
} 
this.splice(dx, 1); 
} 
var subTypeName = []; 
function clinkType(name) { 
var index = subTypeName.indexOf(name) 
if (index == -1) { 
subTypeName.push(name); 
} else { 
subTypeName.baoremove(index); 
} 
$('#typeOneSubResult').html(subTypeName.join(",")); 
}

图片 2

您大概感兴趣的稿子:

  • js完结Infiniti级树形导航列表效果代码
  • JS落成协理多选的遍历下拉列表代码
  • js达成Select列表内容自动滚动作效果应代码
  • js完成带有介绍的Select列表菜单实例
  • JS+DIV+CSS实现仿表单下拉列表效果
  • JS+CSS达成下拉列表框美化效果(3款)
  • JS+CSS完结美化的下拉列表框效果
  • js点击列表文字对应该行展现背景颜色的贯彻代码
  • jQuery实今后下拉列表选取时获得json数据的法子
  • JS+CSS达成Li列表隔行换色效果的主意
  • JS完结带鼠标效果的头像及小说列表代码

在线演示地址如下:

现实代码如下:

<html>
<head>
<title>带有说明的导航栏</title>
</head>
<body>
<script language="JavaScript"> 
<!--
function herfto(){
  if (document.stationform.refsel.options[0].selected){ //根据用户选定的项目
    window.location.href = "//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程序设计有所帮忙。

您也许感兴趣的篇章:

  • js实现Infiniti级树形导航列表效果代码
  • JS达成支持多选的遍历下拉列表代码
  • js完毕Select列表内容自动滚动作效果应代码
  • JS+DIV+CSS达成仿表单下拉列表效果
  • JS+CSS达成下拉列表框美化效果(3款)
  • JS+CSS落成美化的下拉列表框效果
  • js点击列表文字对应该行呈现背景颜色的兑当代码
  • jQuery完结在下拉列表选拔时收获json数据的点子
  • JS+CSS完成Li列表隔行换色效果的诀窍
  • JS 达成列表与多选框接纳附预览动画
  • JS完结带鼠标效果的头像及小说列表代码

本文由正版必中一肖图发布于关于计算机,转载请注明出处:js达成带有介绍的Select列表菜单实例,完毕列表与

上一篇:JavaScript操作Oracle数据库示例,JavaScript数据库Ta 下一篇:没有了
猜你喜欢
热门排行
精彩图文