zoukankan      html  css  js  c++  java
  • Jquery实现下拉联动表单

    <!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>下拉框表单联动</title>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <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().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" style="display:none;"></div>
    </body>
    </html>

    如果用Ajax传值,传过来的data循环:

    $.ajax({
    type:"POST",
    url:"JS/parentDate.json",
    dataType:"json",
    success: function(data){
    var select=$("#pselect");
    $.each(data,function(i,info){
    var option = $("<option value='"+info.id+"'>"+info.name+"</option>");
    select.append(option);

    });
    }
    });

  • 相关阅读:
    STL————vector的用法
    DFS,DP————N皇后问题
    DP经典问题—————(LCIS)最长公共上升子序列
    DP————LIS(最长上升子序列)和LCS(最长公共子序列)问题
    CentOS7使用firewalld打开关闭防火墙与端口
    CentOS7下安装MySQL5.7安装与配置(YUM)
    nginx + tomcat +redis 负载均衡遇到问题集锦
    centos 7 安装 tomcat
    centos 7 设置防火墙 开放指定端口
    centos 7 通过yum 安装 nginx
  • 原文地址:https://www.cnblogs.com/eyunhua/p/3719317.html
Copyright © 2011-2022 走看看