Я бы делал так.
Делаем АПИ, предположим на PHP, и при обращении по AJAX к этому апи с определенными POST или GET запросами я бы отдавал из него JSON который уже разбирал бы в JS на предмет замены информации на экране.
Таким образом можно без перезагрузки всей страницы а только части с выдачей организовать отображение склада.
---------------------------getJSON.php------------------------
<?php
$result = new StdClass();
if($_POST['filterName']){
$result->success = true;
$result->message = "SOME DATA";
} else {
$result->error = true;
$result->errorMessage = "Не свезло";
}
$json = json_encode($json);
echo $json;
?>
---------------------------getJSON.php------------------------
---------------------------index.html--------------------------
<body>
<form id="formID">
<select name="filterName">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="filterName2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<div id="placeReplace">
some html
</div>
</body>
<script>
$("select.someSelect").on("change",function(){
sendFormGetJSON();
return false;
});
function sendFormGetJSON() {
var f = $('#formID').serializeObject();
$.ajax({
url: "getJSON.php",
type: "POST",
dataType: "json",
data: {
"filterName":f.filterName,
"filterName2":f.filterName2,
},
success: function(data){
setTimeout(function(){
if (data.success == true){
$("#placeReplace").html(data.successMessage);
}else{
alert(data.errorMessage);
}
}, 1000);
},
error: function(){
alert("Произошла ошибка, повторите попытку позже");
}
});
}
$.fn.serializeObject = function(){
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
</script>
---------------------------index.html--------------------------