[JQ权威指南]第十三天：三个下拉列联动展示数据_jq实现二级联动的下拉列表框-优快云博客

本文链接：https://blog.youkuaiyun.com/david_520042/article/details/48022975

本文介绍了一种使用HTML和JavaScript实现的联动下拉列表功能，该功能允许用户通过选择厂商、品牌和型号来查询特定的车型信息。当用户选择某个选项时，其他相关联的下拉列表会相应更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为实现根据厂商、名牌、型号查询车型的功能，在页面中，设置三个下拉表框，分别用于保存厂商、名牌、型号的数据。当用户在选择厂商时，名牌和型号下拉列表框随其数据变化而变化；当用户选择名牌时候型号下拉列表随其所选数据变化而变化，从而实现了三个下拉列表框联动展示数据的功能。单击“查询”按钮时，显示用户所选择的全部选项。

<!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>
    <title>列表框中事件应用</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.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> 
  <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() { //厂商列表框选项改变事件
              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() { //遍历数据增加型号项
                                      $("#selC").append("<option>" + this + "</option>");
                                  });
                              }
                          });
                      });

                  }
              });
          });

          $("#Button1").click(function() { //注册按钮单击事件
              var strValue = "您选择的厂商:";
              strValue += $("#selF option:selected").text();
              strValue += "&nbsp;您选择的品牌:";
              strValue += $("#selT option:selected").text();
              strValue += "&nbsp;您选择的型号:";
              strValue += $("#selC option:selected").text();
              $("#divTip")
              .show()
              .addClass("clsTip")
              .html(strValue); //显示提示信息并增加样式
          });
      })
       </script> 
</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>
</html>