[ Mini Kiebo ]
Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64
Path:
D:
/
xampp
/
htdocs
/
bem
/
assets
/
jquery-chained
/
[
Home
]
File: demo.html
<!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>Chained Select / Pulldown Demo</title> <meta name="generator" content="fingers" /> <link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" /> <link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" /> <style type="text/css"> #sidebar { width: 0px; } #content { width: 770px; } #button, #button-remote { display: none; } </style> </head> <body> <div id="wrap"> <div id="header"> <p> <h1>Chained</h1><br /> <small>Chained select plugin for jQuery</small> <ul id="nav"> <li id="first"><a href="/" class="active">weblog</a></li> <li><a href="/projects" class="last">projects</a></li> <!-- <li><a href="/cv" class="last">cv</a></li> --> </ul> </p> </div> <div id="content"> <div class="entry"> <h3>jquery.chained.js</h3> <form> <select id="mark" name="mark"> <option value="">--</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> </select> <select id="series" name="series"> <option value="">--</option> <option value="series-1" class="bmw">1 series</option> <option value="series-3" class="bmw">3 series</option> <option value="series-5" class="bmw">5 series</option> <option value="series-6" class="bmw">6 series</option> <option value="series-7" class="bmw">7 series</option> <option value="a1" class="audi">A1</option> <option value="a3" class="audi">A3</option> <option value="s3" class="audi">S3</option> <option value="a4" class="audi">A4</option> <option value="s4" class="audi">S4</option> <option value="a5" class="audi">A5</option> <option value="s5" class="audi">S5</option> <option value="a6" class="audi">A6</option> <option value="s6" class="audi" selected="selected">S6</option> <option value="rs6" class="audi">RS6</option> <option value="a8" class="audi">A8</option> </select> <select id="model" name="model"> <option value="">--</option> <option value="3-doors" class="series-1">3 doors</option> <option value="5-doors" class="series-1">5 doors</option> <option value="coupe" class="series-1 series-3 series-6">Coupe</option> <option value="cabrio" class="series-1 series-3 series-6">Cabrio</option> <option value="sedan" class="series-3 series-5 series-7">Sedan</option> <option value="touring" class="series-3 series-5">Touring</option> <option value="gran-tourismo" class="series-5">Gran Tourismo</option> <option value="sedan" class="a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option> <option value="sportback" class="a3 s3 a5 s5">Sportback</option> <option value="cabriolet" class="a3 a5 s5">Cabriolet</option> <option value="avant" class="a4 s4 a6 s6 rs6">Avant</option> <option value="allroad" class="a4 a6">Allroad</option> <option value="coupe" class="a5 s5">Coupe</option> </select> <select id="engine" name="engine"> <option value="">--</option> <option value="25-petrol" class="series-3 a3 a4">2.5 petrol</option> <option value="30-petrol" class="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option> <option value="30-diesel" class="series-3\sedan series-5\sedan a5">3.0 diesel</option> </select> <button id="button" type="submit">Button</button> </form> <form> <select id="a" name="a"> <option value="a1">a1</option> <option value="a2">a2</option> <option value="a3">a3</option> </select> <select id="b" name="b"> <option value="b1">b1</option> <option value="b2">b2</option> <option value="b3">b3</option> </select> <select id="c" name="c"> <option value="">--</option> <option value="a1" class="a1">anything starting a1</option> <option value="a1b1" class="a1\b1">a1b1</option> <option value="a1b1_a1b2" class="a1\b1 a1\b2">a1b1 or a1b2</option> <option value="a2b2" class="a2\b2">a2b2</option> <option value="a2b3" class="a2\b3">a2b3</option> </select> </form> </div> <div class="entry"> <h3>Multiple jquery.chained.js</h3> <form> <select class="mark" name="mark"> <option value="">--</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> </select> <select class="series" name="series"> <option value="">--</option> <option value="series-1" class="bmw">1 series</option> <option value="series-3" class="bmw">3 series</option> <option value="series-5" class="bmw">5 series</option> <option value="series-6" class="bmw">6 series</option> <option value="series-7" class="bmw">7 series</option> <option value="a1" class="audi">A1</option> <option value="a3" class="audi">A3</option> <option value="s3" class="audi">S3</option> <option value="a4" class="audi">A4</option> <option value="s4" class="audi">S4</option> <option value="a5" class="audi">A5</option> <option value="s5" class="audi">S5</option> <option value="a6" class="audi">A6</option> <option value="s6" class="audi">S6</option> <option value="rs6" class="audi">RS6</option> <option value="a8" class="audi">A8</option> </select> <select class="model" name="model"> <option value="">--</option> <option value="3-doors" class="series-1">3 doors</option> <option value="5-doors" class="series-1">5 doors</option> <option value="coupe" class="series-1 series-3 series-6">Coupe</option> <option value="cabrio" class="series-1 series-3 series-6">Cabrio</option> <option value="sedan" class="series-3 series-5 series-7">Sedan</option> <option value="touring" class="series-3 series-5">Touring</option> <option value="gran-tourismo" class="series-5">Gran Tourismo</option> <option value="sedan" class="a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option> <option value="sportback" class="a3 s3 a5 s5">Sportback</option> <option value="cabriolet" class="a3 a5 s5">Cabriolet</option> <option value="avant" class="a4 s4 a6 s6 rs6">Avant</option> <option value="allroad" class="a4 a6">Allroad</option> <option value="coupe" class="a5 s5">Coupe</option> </select> <select class="engine" name="engine"> <option value="">--</option> <option value="25-petrol" class="series-3 a3 a4">2.5 petrol</option> <option value="30-petrol" class="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option> <option value="30-diesel" class="series-3\sedan series-5\sedan a5">3.0 diesel</option> </select> </form> <form> <select class="mark" name="mark"> <option value="">--</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> </select> <select class="series" name="series"> <option value="">--</option> <option value="series-1" class="bmw">1 series</option> <option value="series-3" class="bmw">3 series</option> <option value="series-5" class="bmw">5 series</option> <option value="series-6" class="bmw">6 series</option> <option value="series-7" class="bmw">7 series</option> <option value="a1" class="audi">A1</option> <option value="a3" class="audi">A3</option> <option value="s3" class="audi">S3</option> <option value="a4" class="audi">A4</option> <option value="s4" class="audi">S4</option> <option value="a5" class="audi">A5</option> <option value="s5" class="audi">S5</option> <option value="a6" class="audi">A6</option> <option value="s6" class="audi">S6</option> <option value="rs6" class="audi">RS6</option> <option value="a8" class="audi">A8</option> </select> <select class="model" name="model"> <option value="">--</option> <option value="3-doors" class="series-1">3 doors</option> <option value="5-doors" class="series-1">5 doors</option> <option value="coupe" class="series-1 series-3 series-6">Coupe</option> <option value="cabrio" class="series-1 series-3 series-6">Cabrio</option> <option value="sedan" class="series-3 series-5 series-7">Sedan</option> <option value="touring" class="series-3 series-5">Touring</option> <option value="gran-tourismo" class="series-5">Gran Tourismo</option> <option value="sedan" class="a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option> <option value="sportback" class="a3 s3 a5 s5">Sportback</option> <option value="cabriolet" class="a3 a5 s5">Cabriolet</option> <option value="avant" class="a4 s4 a6 s6 rs6">Avant</option> <option value="allroad" class="a4 a6">Allroad</option> <option value="coupe" class="a5 s5">Coupe</option> </select> <select class="engine" name="engine"> <option value="">--</option> <option value="25-petrol" class="series-3 a3 a4">2.5 petrol</option> <option value="30-petrol" class="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option> <option value="30-diesel" class="series-3\sedan series-5\sedan a5">3.0 diesel</option> </select> </form> <form> <select class="mark" name="mark"> <option value="">--</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> </select> <select class="series" name="series"> <option value="">--</option> <option value="series-1" class="bmw">1 series</option> <option value="series-3" class="bmw">3 series</option> <option value="series-5" class="bmw">5 series</option> <option value="series-6" class="bmw">6 series</option> <option value="series-7" class="bmw">7 series</option> <option value="a1" class="audi">A1</option> <option value="a3" class="audi">A3</option> <option value="s3" class="audi">S3</option> <option value="a4" class="audi">A4</option> <option value="s4" class="audi">S4</option> <option value="a5" class="audi">A5</option> <option value="s5" class="audi">S5</option> <option value="a6" class="audi">A6</option> <option value="s6" class="audi">S6</option> <option value="rs6" class="audi">RS6</option> <option value="a8" class="audi">A8</option> </select> <select class="model" name="model"> <option value="">--</option> <option value="3-doors" class="series-1">3 doors</option> <option value="5-doors" class="series-1">5 doors</option> <option value="coupe" class="series-1 series-3 series-6">Coupe</option> <option value="cabrio" class="series-1 series-3 series-6">Cabrio</option> <option value="sedan" class="series-3 series-5 series-7">Sedan</option> <option value="touring" class="series-3 series-5">Touring</option> <option value="gran-tourismo" class="series-5">Gran Tourismo</option> <option value="sedan" class="a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option> <option value="sportback" class="a3 s3 a5 s5">Sportback</option> <option value="cabriolet" class="a3 a5 s5">Cabriolet</option> <option value="avant" class="a4 s4 a6 s6 rs6">Avant</option> <option value="allroad" class="a4 a6">Allroad</option> <option value="coupe" class="a5 s5">Coupe</option> </select> <select class="engine" name="engine"> <option value="">--</option> <option value="25-petrol" class="series-3 a3 a4">2.5 petrol</option> <option value="30-petrol" class="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option> <option value="30-diesel" class="series-3\sedan series-5\sedan a5">3.0 diesel</option> </select> </form> </div> <div class="entry"> <h3>jquery.chained.remote.js</h3> <form> <select id="mark-remote" data-variable="bar" name="mark"> <option value="">--</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> </select> <select id="series-remote" name="series"> <option value="">--</option> </select> <select id="model-remote" name="model"> <option value="">--</option> </select> <select id="engine-remote" name="engine"> <option value="">--</option> </select> <button id="button-remote" type="submit">Button</button> </form> <form> <select id="a-remote" name="a"> <option value="a1">a1</option> <option value="a2">a2</option> <option value="a3">a3</option> </select> <select id="b-remote" name="b"> <option value="b1">b1</option> <option value="b2">b2</option> <option value="b3">b3</option> </select> <select id="c-remote" name="c"> <option value="">--</option> </select> </form> </div> <div class="entry"> <h3>Multiple jquery.chained.remote.js</h3> <form> <select class="mark-remote" name="mark"> <option value="">--</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> </select> <select class="series-remote" name="series"> <option value="">--</option> </select> <select class="model-remote" name="model"> <option value="">--</option> </select> <select class="engine-remote" name="engine"> <option value="">--</option> </select> <button id="button-remote" type="submit">Button</button> </form> <form> <select class="mark-remote" name="mark"> <option value="">--</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> </select> <select class="series-remote" name="series"> <option value="">--</option> </select> <select class="model-remote" name="model"> <option value="">--</option> </select> <select class="engine-remote" name="engine"> <option value="">--</option> </select> <button id="button-remote" type="submit">Button</button> </form> <form> <select class="mark-remote" name="mark"> <option value="">--</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> </select> <select class="series-remote" name="series"> <option value="">--</option> </select> <select class="model-remote" name="model"> <option value="">--</option> </select> <select class="engine-remote" name="engine"> <option value="">--</option> </select> <button id="button-remote" type="submit">Button</button> </form> <form> <select class="mark-remote" name="mark"> <option value="">--</option> <option value="bmw">BMW</option> <option value="audi">Audi</option> </select> <select class="series-remote" name="series"> <option value="">--</option> </select> <select class="model-remote" name="model"> <option value="">--</option> </select> <select class="engine-remote" name="engine"> <option value="">--</option> </select> <button id="button-remote" type="submit">Button</button> </form> </div> <div class="entry"> <h3>Normal input parent and jquery.chained.remote.js</h3> <form> <input id="mark-remote-2" name="mark" value="audi"> <select id="series-remote-2" name="series"> <option value="">--</option> </select> <select id="model-remote-2" name="model"> <option value="">--</option> </select> <select id="engine-remote-2" name="engine"> <option value="">--</option> </select> <button id="button-remote-2" type="submit">Button</button> </form> </div> <div id="sidebar"> </div> </div> <div id="footer"> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.chained.js?v=1.0.0" type="text/javascript" charset="utf-8"></script> <script src="jquery.chained.remote.js?v=1.0.0" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { /* For jquery.chained.js */ $("#series").chained("#mark"); $("#model").chained("#series"); $("#engine").chained("#series, #model"); /* Show button after each pulldown has a value. */ $("#engine").bind("change", function(event) { if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model")).val()) { $("#button").fadeIn(); } else { $("#button").hide(); } }); $("#c").chained("#a,#b"); /* For jquery.chained.remote.js */ $("#series-remote").remoteChained({ parents : "#mark-remote", url : "json.php?sleep=1", loading : "--" }); $("#model-remote").remoteChained({ parents : "#series-remote", url : "json.php?sleep=1", loading : "--" }); $("#engine-remote").remoteChained({ parents : "#series-remote, #model-remote", url : "json.php?sleep=1", loading : "--", clear : true }); /* Show button after each pulldown has a value. */ $("#engine-remote").bind("change", function(event) { if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model-remote")).val()) { $("#button-remote").fadeIn(); } else { $("#button-remote").hide(); } }); $("#c-remote").remoteChained("#a-remote,#b-remote", "json.php"); /* For multiple jquery.chained.remote.js */ $(".series-remote").each(function() { $(this).remoteChained($(".mark-remote", $(this).parent()), "json.php"); }); $(".model-remote").each(function() { $(this).remoteChained($(".series-remote", $(this).parent()), "json.php"); }); $(".engine-remote").each(function() { $(this).remoteChained([ $(".series-remote", $(this).parent()), $(".model-remote", $(this).parent()) ], "json.php"); }); /* For multiple jquery.chained.js */ $(".series").each(function() { $(this).chained($(".mark", $(this).parent())); }); $(".model").each(function() { $(this).chained($(".series", $(this).parent())); }); $(".engine").each(function() { $(this).chained([ $(".series", $(this).parent()), $(".model", $(this).parent()) ]); }); /* For normal input and jquery.chained.remote.js */ $("#series-remote-2").remoteChained({ parents : "#mark-remote-2", url : "json.php", }); $("#model-remote-2").remoteChained({ parents : "#series-remote-2", url : "json.php" }); $("#engine-remote-2").remoteChained({ parents : "#series-remote-2, #model-remote-2", url : "json.php" }); /* Show button after each pulldown has a value. */ $("#engine-remote-2").bind("change", function(event) { if ("" != $("option:selected", this).val() && "" != $("option:selected", $("#model-remote-2")).val()) { $("#button-remote-2").fadeIn(); } else { $("#button-remote-2").hide(); } }); }); </script> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-190966-1"; urchinTracker(); </script> </body> </html>