<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">–</option>
<option value="100">BMW</option>
<option value="101">Audi</option>
</select>
<select id="series" name="series">
<option value="">–</option>
<option value="1" class="100">1 series</option>
<option value="3" class="100">3 series</option>
<option value="5" class="100">5 series</option>
<option value="6" class="100">6 series</option>
<option value="7" class="100">7 series</option>
<option value="11" class="101">A1</option>
<option value="23" class="101">A3</option>
<option value="33" class="101">S3</option>
<option value="44" class="101">A4</option>
<option value="54" class="101">S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
затем js скрипт
(function($) {
$.fn.chained = function(parent_selector, options) {
return this.each(function() {
/* Save this to self because this changes when scope changes. */
var self = this;
var backup = $(self).clone();
/* Handles maximum two parents now. */
$(parent_selector).each(function() {
$(this).bind("change", function() {
$(self).html(backup.html());
var selected = "";
selected = selected.substr(1);
/* Also check for first parent without subclassing. */
/* TODO: This should be dynamic and check for each parent */
/* without subclassing. */
var first = $(parent_selector).first();
var selected_first = $(":selected", first).val();
$("option", self).each(function() {
/* Remove unneeded items but save the default value. */
if (!$(this).hasClass(selected) &&
!$(this).hasClass(selected_first) && $(this).val() !== "") {
$(this).remove();
}
});
/* If we have only the default value disable select. */
if (1 == $("option", self).size() && $(self).val() === "") {
$(self).attr("disabled", "disabled");
} else {
$(self).removeAttr("disabled");
}
$(self).trigger("change");
});
/* Force IE to see something selected on first page load. */
$("option", this).first().attr("selected", "selected");
/* Force updating the children. */
$(this).trigger("change");
});
});
};
/* Alias for those who like to use more English like syntax. */
$.fn.chainedTo = $.fn.chained;
})(jQuery);
show.php
<?php
if (isset($_GET['mark']))
{
$papar_car=$_GET['mark'];
}
if (isset($_GET['series']))
{
$papar_ser=$_GET['series'];
}
?>
<!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"/>
</head>
<body>
<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">–</option>
<option value="100"<? if($papar_car=="100")echo "selected='selected'"; ?>>BMW</option>
<option value="101"<? if($papar_car=="101")echo "selected='selected'"; ?>>Audi</option>
</select>
<select id="series" name="series">
<option value="">–</option>
<option value="1" class="100" <? if($papar_ser=="1")echo "selected='selected'"; ?>>1 series</option>
<option value="3" class="100"<? if($papar_ser=="3")echo "selected='selected'"; ?>>3 series</option>
<option value="5" class="100"<? if($papar_ser=="5")echo "selected='selected'"; ?>>5 series</option>
<option value="6" class="100"<? if($papar_ser=="6")echo "selected='selected'"; ?>>6 series</option>
<option value="7" class="100<? if($papar_ser=="7")echo "selected='selected'"; ?>">7 series</option>
<option value="11" class="101" <? if($papar_ser=="11")echo "selected='selected'"; ?>>A1</option>
<option value="23" class="101" <? if($papar_ser=="23")echo "selected='selected'"; ?>>A3</option>
<option value="33" class="101"<? if($papar_ser=="33")echo "selected='selected'"; ?>>S3</option>
<option value="44" class="101" <? if($papar_ser=="44")echo "selected='selected'"; ?>>A4</option>
<option value="54" class="101"<? if($papar_ser=="54")echo "selected='selected'"; ?>>S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script type="text/javascript" language="javascript">
var car_m= <?php echo $_POST['mark']; ?>
</script>
<script type="text/javascript" language="javascript">
var car_m_s= <?php echo $_POST['series']; ?>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
загвоздка в следующем. на странице index выбираю категорию из form1. затем жму submit. перехожу на show, и хочу увидеть те значения которые выбирал на странице index. как решить?