548 lines
22 KiB
HTML
Executable File
548 lines
22 KiB
HTML
Executable File
<!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" data-chained="bmw">1 series</option>
|
||
<option value="series-3" data-chained="bmw">3 series</option>
|
||
<option value="series-5" data-chained="bmw">5 series</option>
|
||
<option value="series-6" data-chained="bmw">6 series</option>
|
||
<option value="series-7" data-chained="bmw">7 series</option>
|
||
|
||
<option value="a1" data-chained="audi">A1</option>
|
||
<option value="a3" data-chained="audi">A3</option>
|
||
<option value="s3" data-chained="audi">S3</option>
|
||
<option value="a4" data-chained="audi">A4</option>
|
||
<option value="s4" data-chained="audi">S4</option>
|
||
<option value="a5" data-chained="audi">A5</option>
|
||
<option value="s5" data-chained="audi">S5</option>
|
||
<option value="a6" data-chained="audi">A6</option>
|
||
<option value="s6" data-chained="audi" selected="selected">S6</option>
|
||
<option value="rs6" data-chained="audi">RS6</option>
|
||
<option value="a8" data-chained="audi">A8</option>
|
||
</select>
|
||
<select id="model" name="model">
|
||
<option value="">--</option>
|
||
|
||
<option value="3-doors" data-chained="series-1">3 doors</option>
|
||
<option value="5-doors" data-chained="series-1">5 doors</option>
|
||
<option value="coupe" data-chained="series-1 series-3 series-6">Coupe</option>
|
||
<option value="cabrio" data-chained="series-1 series-3 series-6">Cabrio</option>
|
||
<option value="sedan" data-chained="series-3 series-5 series-7">Sedan</option>
|
||
<option value="touring" data-chained="series-3 series-5">Touring</option>
|
||
<option value="gran-tourismo" data-chained="series-5">Gran Tourismo</option>
|
||
|
||
<option value="sedan" data-chained="a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option>
|
||
<option value="sportback" data-chained="a3 s3 a5 s5">Sportback</option>
|
||
<option value="cabriolet" data-chained="a3 a5 s5">Cabriolet</option>
|
||
<option value="avant" data-chained="a4 s4 a6 s6 rs6">Avant</option>
|
||
<option value="allroad" data-chained="a4 a6">Allroad</option>
|
||
<option value="coupe" data-chained="a5 s5">Coupe</option>
|
||
</select>
|
||
|
||
<select id="engine" name="engine">
|
||
<option value="">--</option>
|
||
<option value="25-petrol" data-chained="series-3 a3 a4">2.5 petrol</option>
|
||
<option value="30-petrol" data-chained="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>
|
||
<option value="30-diesel" data-chained="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" data-chained="a1">anything starting a1</option>
|
||
<option value="a1b1" data-chained="a1\b1">a1b1</option>
|
||
<option value="a1b1_a1b2" data-chained="a1\b1 a1\b2">a1b1 or a1b2</option>
|
||
<option value="a2b2" data-chained="a2\b2">a2b2</option>
|
||
<option value="a2b3" data-chained="a2\b3">a2b3</option>
|
||
</select>
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<div data-chained="entry">
|
||
<h3>Multiple jquery.chained.js</h3>
|
||
<form>
|
||
<select data-chained="mark" name="mark">
|
||
<option value="">--</option>
|
||
<option value="bmw">BMW</option>
|
||
<option value="audi">Audi</option>
|
||
</select>
|
||
<select data-chained="series" name="series">
|
||
<option value="">--</option>
|
||
|
||
<option value="series-1" data-chained="bmw">1 series</option>
|
||
<option value="series-3" data-chained="bmw">3 series</option>
|
||
<option value="series-5" data-chained="bmw">5 series</option>
|
||
<option value="series-6" data-chained="bmw">6 series</option>
|
||
<option value="series-7" data-chained="bmw">7 series</option>
|
||
|
||
<option value="a1" data-chained="audi">A1</option>
|
||
<option value="a3" data-chained="audi">A3</option>
|
||
<option value="s3" data-chained="audi">S3</option>
|
||
<option value="a4" data-chained="audi">A4</option>
|
||
<option value="s4" data-chained="audi">S4</option>
|
||
<option value="a5" data-chained="audi">A5</option>
|
||
<option value="s5" data-chained="audi">S5</option>
|
||
<option value="a6" data-chained="audi">A6</option>
|
||
<option value="s6" data-chained="audi">S6</option>
|
||
<option value="rs6" data-chained="audi">RS6</option>
|
||
<option value="a8" data-chained="audi">A8</option>
|
||
</select>
|
||
<select data-chained="model" name="model">
|
||
<option value="">--</option>
|
||
|
||
<option value="3-doors" data-chained="series-1">3 doors</option>
|
||
<option value="5-doors" data-chained="series-1">5 doors</option>
|
||
<option value="coupe" data-chained="series-1 series-3 series-6">Coupe</option>
|
||
<option value="cabrio" data-chained="series-1 series-3 series-6">Cabrio</option>
|
||
<option value="sedan" data-chained="series-3 series-5 series-7">Sedan</option>
|
||
<option value="touring" data-chained="series-3 series-5">Touring</option>
|
||
<option value="gran-tourismo" data-chained="series-5">Gran Tourismo</option>
|
||
|
||
<option value="sedan" data-chained="a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option>
|
||
<option value="sportback" data-chained="a3 s3 a5 s5">Sportback</option>
|
||
<option value="cabriolet" data-chained="a3 a5 s5">Cabriolet</option>
|
||
<option value="avant" data-chained="a4 s4 a6 s6 rs6">Avant</option>
|
||
<option value="allroad" data-chained="a4 a6">Allroad</option>
|
||
<option value="coupe" data-chained="a5 s5">Coupe</option>
|
||
</select>
|
||
|
||
<select data-chained="engine" name="engine">
|
||
<option value="">--</option>
|
||
<option value="25-petrol" data-chained="series-3 a3 a4">2.5 petrol</option>
|
||
<option value="30-petrol" data-chained="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>
|
||
<option value="30-diesel" data-chained="series-3\sedan series-5\sedan a5">3.0 diesel</option>
|
||
</select>
|
||
</form>
|
||
<form>
|
||
<select data-chained="mark" name="mark">
|
||
<option value="">--</option>
|
||
<option value="bmw">BMW</option>
|
||
<option value="audi">Audi</option>
|
||
</select>
|
||
<select data-chained="series" name="series">
|
||
<option value="">--</option>
|
||
|
||
<option value="series-1" data-chained="bmw">1 series</option>
|
||
<option value="series-3" data-chained="bmw">3 series</option>
|
||
<option value="series-5" data-chained="bmw">5 series</option>
|
||
<option value="series-6" data-chained="bmw">6 series</option>
|
||
<option value="series-7" data-chained="bmw">7 series</option>
|
||
|
||
<option value="a1" data-chained="audi">A1</option>
|
||
<option value="a3" data-chained="audi">A3</option>
|
||
<option value="s3" data-chained="audi">S3</option>
|
||
<option value="a4" data-chained="audi">A4</option>
|
||
<option value="s4" data-chained="audi">S4</option>
|
||
<option value="a5" data-chained="audi">A5</option>
|
||
<option value="s5" data-chained="audi">S5</option>
|
||
<option value="a6" data-chained="audi">A6</option>
|
||
<option value="s6" data-chained="audi">S6</option>
|
||
<option value="rs6" data-chained="audi">RS6</option>
|
||
<option value="a8" data-chained="audi">A8</option>
|
||
</select>
|
||
<select data-chained="model" name="model">
|
||
<option value="">--</option>
|
||
|
||
<option value="3-doors" data-chained="series-1">3 doors</option>
|
||
<option value="5-doors" data-chained="series-1">5 doors</option>
|
||
<option value="coupe" data-chained="series-1 series-3 series-6">Coupe</option>
|
||
<option value="cabrio" data-chained="series-1 series-3 series-6">Cabrio</option>
|
||
<option value="sedan" data-chained="series-3 series-5 series-7">Sedan</option>
|
||
<option value="touring" data-chained="series-3 series-5">Touring</option>
|
||
<option value="gran-tourismo" data-chained="series-5">Gran Tourismo</option>
|
||
|
||
<option value="sedan" data-chained="a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option>
|
||
<option value="sportback" data-chained="a3 s3 a5 s5">Sportback</option>
|
||
<option value="cabriolet" data-chained="a3 a5 s5">Cabriolet</option>
|
||
<option value="avant" data-chained="a4 s4 a6 s6 rs6">Avant</option>
|
||
<option value="allroad" data-chained="a4 a6">Allroad</option>
|
||
<option value="coupe" data-chained="a5 s5">Coupe</option>
|
||
</select>
|
||
|
||
<select data-chained="engine" name="engine">
|
||
<option value="">--</option>
|
||
<option value="25-petrol" data-chained="series-3 a3 a4">2.5 petrol</option>
|
||
<option value="30-petrol" data-chained="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>
|
||
<option value="30-diesel" data-chained="series-3\sedan series-5\sedan a5">3.0 diesel</option>
|
||
</select>
|
||
</form>
|
||
<form>
|
||
<select data-chained="mark" name="mark">
|
||
<option value="">--</option>
|
||
<option value="bmw">BMW</option>
|
||
<option value="audi">Audi</option>
|
||
</select>
|
||
<select data-chained="series" name="series">
|
||
<option value="">--</option>
|
||
|
||
<option value="series-1" data-chained="bmw">1 series</option>
|
||
<option value="series-3" data-chained="bmw">3 series</option>
|
||
<option value="series-5" data-chained="bmw">5 series</option>
|
||
<option value="series-6" data-chained="bmw">6 series</option>
|
||
<option value="series-7" data-chained="bmw">7 series</option>
|
||
|
||
<option value="a1" data-chained="audi">A1</option>
|
||
<option value="a3" data-chained="audi">A3</option>
|
||
<option value="s3" data-chained="audi">S3</option>
|
||
<option value="a4" data-chained="audi">A4</option>
|
||
<option value="s4" data-chained="audi">S4</option>
|
||
<option value="a5" data-chained="audi">A5</option>
|
||
<option value="s5" data-chained="audi">S5</option>
|
||
<option value="a6" data-chained="audi">A6</option>
|
||
<option value="s6" data-chained="audi">S6</option>
|
||
<option value="rs6" data-chained="audi">RS6</option>
|
||
<option value="a8" data-chained="audi">A8</option>
|
||
</select>
|
||
<select data-chained="model" name="model">
|
||
<option value="">--</option>
|
||
|
||
<option value="3-doors" data-chained="series-1">3 doors</option>
|
||
<option value="5-doors" data-chained="series-1">5 doors</option>
|
||
<option value="coupe" data-chained="series-1 series-3 series-6">Coupe</option>
|
||
<option value="cabrio" data-chained="series-1 series-3 series-6">Cabrio</option>
|
||
<option value="sedan" data-chained="series-3 series-5 series-7">Sedan</option>
|
||
<option value="touring" data-chained="series-3 series-5">Touring</option>
|
||
<option value="gran-tourismo" data-chained="series-5">Gran Tourismo</option>
|
||
|
||
<option value="sedan" data-chained="a1 a3 s3 a4 s4 a6 s6 rs6">Sedan</option>
|
||
<option value="sportback" data-chained="a3 s3 a5 s5">Sportback</option>
|
||
<option value="cabriolet" data-chained="a3 a5 s5">Cabriolet</option>
|
||
<option value="avant" data-chained="a4 s4 a6 s6 rs6">Avant</option>
|
||
<option value="allroad" data-chained="a4 a6">Allroad</option>
|
||
<option value="coupe" data-chained="a5 s5">Coupe</option>
|
||
</select>
|
||
|
||
<select data-chained="engine" name="engine">
|
||
<option value="">--</option>
|
||
<option value="25-petrol" data-chained="series-3 a3 a4">2.5 petrol</option>
|
||
<option value="30-petrol" data-chained="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>
|
||
<option value="30-diesel" data-chained="series-3\sedan series-5\sedan a5">3.0 diesel</option>
|
||
</select>
|
||
|
||
|
||
</form>
|
||
</div>
|
||
|
||
<div data-chained="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 data-chained="entry">
|
||
<h3>Multiple jquery.chained.remote.js</h3>
|
||
<form>
|
||
<select data-chained="mark-remote" name="mark">
|
||
<option value="">--</option>
|
||
<option value="bmw">BMW</option>
|
||
<option value="audi">Audi</option>
|
||
</select>
|
||
<select data-chained="series-remote" name="series">
|
||
<option value="">--</option>
|
||
</select>
|
||
<select data-chained="model-remote" name="model">
|
||
<option value="">--</option>
|
||
</select>
|
||
<select data-chained="engine-remote" name="engine">
|
||
<option value="">--</option>
|
||
</select>
|
||
|
||
<button id="button-remote" type="submit">Button</button>
|
||
</form>
|
||
<form>
|
||
<select data-chained="mark-remote" name="mark">
|
||
<option value="">--</option>
|
||
<option value="bmw">BMW</option>
|
||
<option value="audi">Audi</option>
|
||
</select>
|
||
<select data-chained="series-remote" name="series">
|
||
<option value="">--</option>
|
||
</select>
|
||
<select data-chained="model-remote" name="model">
|
||
<option value="">--</option>
|
||
</select>
|
||
<select data-chained="engine-remote" name="engine">
|
||
<option value="">--</option>
|
||
</select>
|
||
|
||
<button id="button-remote" type="submit">Button</button>
|
||
</form>
|
||
<form>
|
||
<select data-chained="mark-remote" name="mark">
|
||
<option value="">--</option>
|
||
<option value="bmw">BMW</option>
|
||
<option value="audi">Audi</option>
|
||
</select>
|
||
<select data-chained="series-remote" name="series">
|
||
<option value="">--</option>
|
||
</select>
|
||
<select data-chained="model-remote" name="model">
|
||
<option value="">--</option>
|
||
</select>
|
||
<select data-chained="engine-remote" name="engine">
|
||
<option value="">--</option>
|
||
</select>
|
||
|
||
<button id="button-remote" type="submit">Button</button>
|
||
</form>
|
||
<form>
|
||
<select data-chained="mark-remote" name="mark">
|
||
<option value="">--</option>
|
||
<option value="bmw">BMW</option>
|
||
<option value="audi">Audi</option>
|
||
</select>
|
||
<select data-chained="series-remote" name="series">
|
||
<option value="">--</option>
|
||
</select>
|
||
<select data-chained="model-remote" name="model">
|
||
<option value="">--</option>
|
||
</select>
|
||
<select data-chained="engine-remote" name="engine">
|
||
<option value="">--</option>
|
||
</select>
|
||
|
||
<button id="button-remote" type="submit">Button</button>
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<div data-chained="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="http://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="xjquery.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>
|