自动筛选实现三级联动下拉菜单

妖狐艹你老母 2022-06-08 09:39 301阅读 0赞

要点：当选择一个选项的时候，后面的内容自动变成他自己独有的内容

主要运用： 1、$(id).change(function(){}) 2、.show（） 3、var options =$("id option:checked");  获得下拉框选择的元素 4、options.val():选中的value的值 5、options.text():选中为文本的值

源代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三级联动</title>
    
        <script src="../jquery-3.2.1.min.js"></script>
        <style>
            body{
                font-size: 14px;
            }
            .clsInit{
                width: 436px;
                height: 35px;
                line-height: 35px;
                padding-left: 10px;
            }
            .clsTip{
                padding-top: 5px;
                background-color: #eeeeee;
                display: none;
            }
            .btn{
                border: 1px solid #666666;
                padding: 2px;
                width: 65px;
                float: right;
                margin-top: 6px;
                margin-left: 6px;
            }
        </style>
    </head>
    <body>
          <div class="clsInit">
              厂商 <select name="" id="selF">
              <option class="c">请选择</option>
              <option value="F1" id="F1">厂商1</option>
              <option value="F2" id="F2">厂商2</option>
          </select>
              品牌 <select name="" id="selT">
              <option class="c">请选择</option>
              <option class="T1" value="1-1">品牌1-1</option>
              <option class="T1" value="1-2">品牌1-2</option>
              <option class="T2" value="2-1">品牌2-1</option>
              <option class="T2" value="2-2">品牌2-2</option>
    
          </select>
              型号<select name="" id="selC">
              <option value="" class="c">请选择</option>
              <option class="C1">型号1-1-1</option>
              <option class="C1">型号1-1-2</option>
              <option class="C2">型号1-2-1</option>
              <option class="C2">型号1-2-2</option>
              <option class="C2">型号1-2-3</option>
              <option class="C2">型号1-2-4</option>
              <option class="C3">型号2-1-1</option>
              <option class="C4">型号2-2-1</option>
          </select>
              <input type="button" id="button1" value="查询品牌" class="btn">
              <input type="button" id="button2" value="查询型号" class="btn">
          </div>
    <div class="clsTip" id="divTip">
    
    </div>
          <script>
          $(function () {
              $("#selF").change(function(){
                  var options =$("#selF option:checked");
                  if(options.val()=="F1"){
                      $(".T1").show();
                      $(".T2").hide();
                  }else if(options.val()=="F2"){
                      $(".T2").show();
                      $(".T1").hide();
                  }
              })
              $("#selT").change(function(){
                  var options2 =$("#selT option:checked");
                  if(options2.val()=="1-1"){
                      $(".C1").show();
                      $(".C2,.C3,.C4").hide();
                  }else if(options2.val()=="1-2"){
                      $(".C2").show();
                      $(".C1,.C3,.C4").hide();
                  }else if(options2.val()=="2-1"){
                      $(".C3").show();
                      $(".C1,.C2,.C4").hide();
                  } else if(options2.val()=="2-2"){
                      $(".C4").show();
                      $(".C1,.C2,.C3").hide();
                  }
              })
                 });
    
          </script>
    </body>
    </html>