Jquery写级联菜单

最新推荐文章于 2021-12-05 17:10:29 发布

劉胡來

最新推荐文章于 2021-12-05 17:10:29 发布

阅读量630

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/d06110902002/article/details/49978741

版权




<!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=gb2312" />
    <title>第一个简单的jQuery程序</title>
    <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>

    
<style type="text/css">
           body{font-size:13px}
           .clsInit{width:435px;height:35px;line-height:35px;padding-left:10px} 
           .clsTip{padding-top:5px;background-color:#eee;display:none} 
           .btn {border:#666 1px solid;padding:2px;width:65px;float:right;margin-top:6px;margin-right:6px;
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
    </style> 
    
</head>
<body>
    <div class="clsInit">
   厂商:<select id="selF"><option>请选择</option></select>
品牌<select id="selT"><option>请选择</option></select>
型号::<select id="selC"><option>请选择</option></select>
<input id="Button1" type="button" value="查询" class="btn"/>
</div>

<div class="clsInit" id="divTip"></div>


    
   
</body>
   <script type="text/javascript">
        $(function()
{
           function objInit(obj)
  {
     return $(obj).html("<option>请选择</option>");
  }
  
  //初始化级联数组
  var arrData=
  {
     厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },
              厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" },
              厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" }
  
  };
  //遍历上述数据添加到第一个下拉菜单中
  $.each(arrData,function(pF)
  {
    $("#selF").append("<option>"+pF+"</option>");
 
  });
  
  //第一个下拉菜单的改变事件
  $("#selF").change(function()
  {
    var str=$("#selF option:eq(1)").text(); //获取下拉菜单指定的值
var str2=$("selF option:selected").text(); //获取选中项的值
    alert(str);
 
    objInit("#selT");  //初始第二、三个菜单
objInit("#selC");
 
$.each(arrData,function(pF,pS)
{
    //如果厂商选中项与数据匹配
if($("#selF option:selected").text()==pF)
{
    //遍历数据增加品牌项
$.each(pS,function(pT,pC)
{
  $("#selT").append("<option>"+pT+"</option>");
});
 
//品牌列表框改变事件
$("#selT").change(function()
{
   objInit("#selC");
$.each(pS,function(pT,pC)
{
  //如果品牌选中项与数据匹配
  if($("#selT option:selected").text()==pT)
  {
     //遍历数据添加型号项
     $.each(pC.split(","),function(pT,pC)
{
  $("#selC").append("<option>"+this+"</option>");
});
  }
});
});
}
});
 
  });
  
 $("#Button1").click(function() { //注册按钮单击事件
              var strValue = "您选择的厂商:";
              strValue += $("#selF option:selected").text();
              strValue += " 您选择的品牌:";
              strValue += $("#selT option:selected").text();
              strValue += " 您选择的型号:";
              strValue += $("#selC option:selected").text();
              $("#divTip")
              .show()
              .addClass("clsTip")
              .html(strValue); //显示提示信息并增加样式
          });
  
});
      
   </script>

</html>

劉胡來

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery写级联菜单

第一个简单的jQuery程序 body{font-size:13px} .clsInit{width:435px;height:35px;line-height:35px;padding-left:10px} .clsTip{padding-top:5px;background-color:#
复制链接

扫一扫