yurec
/
big-moving.ru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
big-moving.ru/api/jquery/plugins/jquery_chained-2.x/demo.html

548 lines
22 KiB
HTML
Raw Normal View History

first commit
2022-06-24 15:29:23 +05:00
<!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>