select как сохранить зависимые списки и выбранные пункты списков при перезагрузки ст.
Здравствуйте!
Подскажите пожалуйста, как сохранить зависимые списки select и выбранные пункты списков при перезагрузки страницы? Может как-то можно оптимизировать код?
<select name="form_type" id="type_tov" size="1" onchange="select_size(); select_material();" disabled="disabled" class="not_active">
<option>--</option>
</select>
<label>Размер товара</label>
<select name="form_size" id="size_tov" size="1" disabled="disabled" class="not_active">
<option>--</option>
</select>
<label>Материал продукта</label>
<select name="form_material" id="material_list" size="1" disabled="disabled" class="not_active">
<option>--</option>
</select>
function select_tyoe(){
var name_cat = $("#cat").val();
var type_list = document.getElementById('type_tov');
var typeListLen = type_list.length;
var size_list = document.getElementById('size_tov');
var sizeListLen = size_list.length;
var listMaterial = document.getElementById("material_list");
var listMaterialLen = listMaterial.length;
if(name_cat != ''){
$.ajax({
url: "https://localhost/shop/admin/blocks/add_select_type_product.php",type: "POST",
data: "cat="+name_cat,
dataType: "html",
cache: false,
success: function(data){
if(sizeListLen > 1){
$('#size_tov').find('option').remove();/*удаление старых данных*/
$('<option value="">--</option>').fadeIn(300).appendTo('#size_tov');
}
if(listMaterialLen > 1){
$('#material_list').find('option').remove();/*удаление старых данных*/
$('<option value="">--</option>').fadeIn(300).appendTo('#material_list');
}
$('#type_tov').find('option').remove();/*удаление старых данных*/
$(data).fadeIn(300).appendTo('#type_tov');
type_list.size=type_list.length;
type_list.classList.remove("not_active");
type_list.disabled=false;
}
});
}else{
if(typeListLen > 1){
$('#type_tov').find('option').remove();/*удаление старых данных*/
$('<option value="">--</option>').fadeIn(300).appendTo('#type_tov');
type_list.size=1;
type_list.classList.add("not_active");
type_list.disabled="disabled";
}
if(sizeListLen >= 1){
$('#size_tov').find('option').remove();/*удаление старых данных*/
$('<option value="">--</option>').fadeIn(300).appendTo('#size_tov');
size_list.size=1;
size_list.classList.add("not_active");
size_list.disabled="disabled";
}
if(listMaterialLen >= 1){
$('#material_list').find('option').remove();/*удаление старых данных*/
$('<option value="">--</option>').fadeIn(300).appendTo('#material_list');
listMaterial.size=1;
listMaterial.classList.add("not_active");
listMaterial.disabled="disabled";
}
}
};
function select_size(){
var cat_tov = $("#cat").val();
var type_tov = $("#type_tov").val();
var size_list = document.getElementById('size_tov');
var listSizeLen = size_list.length;
var listMaterial = document.getElementById("material_list");
var listMaterialLen = listMaterial.length;
if(type_tov != '' && type_tov.trim() != 'dvukhspalnye_komplekty' && type_tov.trim() != 'odnospalnye_komplekty' && type_tov.trim() != 'polutornye_komplekty' && type_tov.trim() != 'komplekty_semeynoe' && type_tov.trim() != 'euro_komplekty'){
$.ajax({
url: "https://localhost/shop/admin/blocks/add_select_size_product.php",type: "POST",
data: "size="+cat_tov,
dataType: "html",
cache: false,
success: function(data){
$('#size_tov').find('option').remove();/*удаление старых данных*/
$('<option value="">--</option>').fadeIn(300).appendTo('#size_tov');
$(data).fadeIn(300).appendTo('#size_tov');
size_list.classList.remove("not_active");
size_list.disabled=false;
size_list.size=listLen;
}
});
}else{
if(listSizeLen != 1 || type_tov.trim() == '' || type_tov.trim() == 'dvukhspalnye_komplekty' || type_tov.trim() == 'odnospalnye_komplekty' || type_tov.trim() == 'polutornye_komplekty' || type_tov.trim() == 'komplekty_semeynoe' || type_tov.trim() == 'euro_komplekty'){
$('#size_tov').find('option').remove();/*удаление старых данных*/
$('<option value="">--</option>').fadeIn(300).appendTo('#size_tov');
size_list.classList.add("not_active");
size_list.disabled="disabled";
}
if(listMaterialLen != 1){
$('#material_list').find('option').remove();/*удаление старых данных*/
$('<option value="">--</option>').fadeIn(300).appendTo('#material_list');
listMaterial.size=1;
listMaterial.classList.add("not_active");
listMaterial.disabled="disabled";
}
}
};
function select_material(){
var name_cat = $("#cat").val();
var type_tov_selet = $("#type_tov").val();
var material_title = type_tov_selet;
var material_list = document.getElementById('material_list');
var listLen = material_list.length;
if(type_tov_selet != ''){
$.ajax({
url: "https://localhost/shop/admin/blocks/add_select_material_product.php",type: "POST",
data: "cat="+name_cat+"&type_tovara="+type_tov_selet+"&material="+material_title,
dataType: "html",
cache: false,
success: function(data){
$('#material_list').find('option').remove();/*удаление старых данных*/
$('<option value="">--</option>'+data).appendTo('#material_list');
material_list.classList.remove("not_active");
material_list.disabled=false;
}
});
}else{
if(listLen >= 1){
$('#material_list').find('option').remove();/*удаление старых данных*/
$('<option value="">--</option>').fadeIn(300).appendTo('#material_list');
material_list.classList.add("not_active");
material_list.disabled="disabled";
}
}
};
|
Цитата:
Тогда локальное хранилище или куки... |
Цитата:
|
Цитата:
|
Не знаю, правильно или не правильно сделал, с точки зрения опытно программиста, но, мое рения выглядит так:
if(isset($_SESSION['add_type'])) {$select_type = $_SESSION['add_type'];}else{$select_type = 'false';}
function select_type(){
.....
var save_select_type="<? echo $select_type; ?>";
if(name_cat != ''){
$.ajax({
url: "https://localhost/shop/admin/blocks/add_select_type_product.php",type: "POST",
data: "cat="+name_cat+"&select_type="+save_select_type,
Обработчик:
$row = mysql_fetch_array($result_category);
do
{
if($select_type == $row["type_tovara"])
{
echo '<option selected="selected" value="'.trim($row["type_tovara"]).'">'.$row["name_cat"].'</option>';
}
else
{
echo '<option value="'.trim($row["type_tovara"]).'">'.$row["name_cat"].'</option>';
}
}while($row = mysql_fetch_array($result_category));
Вызов JS-функции:
if(isset($_SESSION["add_type"]))
{
echo 'select_type();';
}
|
|
Цитата:
Это не форма регистрации, а форма добавления контента на сайт, в панели управления. Вводимые данные с начало проверяются на валидность, а потом заносятся в БД. И была проблема такого плана, кода данные не валидны, при нажатии кнопки "Добавить", страница перезагружалась и все поля очищались. С обычными input проще, там можно через POST, или SESSION = POST подставлять данные, а вот с зависимыми списками посложнее. |
DDim1000,
убирайте цикл do-whhile и используйте while. Цитата:
Цитата:
|
Цитата:
Есть 4 списка, 2-й и 4-й списки формируются при выборе пункта в 1-ом списке, 3-й список формируется(или отключается disabled="disabled" ) в зависимости выбранного пункта во втором списке. И как это все сохранить, чтоб списки не сбрасывались при перезагрузки страницы? И мне ничего в голову не пришло, как продублировать onchange="select_size(); select_material();", вот таким образом:
if(isset($_SESSION['add_type'])) {$select_type = $_SESSION['add_type'];}else{$select_type = 'false';}
function select_type(){
....
var save_select_type="<? echo $select_type; ?>"; // val. выбранного пункта. При формировании списка в обработчике, сравнивается значение, которое заносится в value, с содержимым переданной переменной, и если есть совпадение, добавляем selected="selected".
if(name_cat != ''){
$.ajax({
url: "https://localhost/shop/admin/blocks/add_select_type_product.php",type: "POST",
data: "cat="+name_cat+"&select_type="+save_select_type,
...
Вызов select_type():
if(isset($_SESSION["add_type"])) //если был сделан выбор в перво списке до нажатие кнопки "Добавить".
{
echo 'select_type();';
}
Если есть получше вариант, подскажите пожалуйста. |
$row = mysql_fetch_array($result_category); do ..... - это плохо, здесь и do-while совсем не нужен, и выбирается все что и не нужно. Вы явно насмотрелись древних мультиков о я зыке. :)
А при формировании кода списков удобнее использовать тернарный оператор, то есть все сводится к этому: while($row = mysql_fetch_assoc($result_category)) echo '<option value="'.$row["type_tovara"].'" '.($select_type == $row["type_tovara"] ? 'selected' : '').'>'.$row["name_cat"].'</option>'; А trim() нужно выполнять при записи данных в базу, а не постоянно при выводе из нее. Но механизм if(isset($_SESSION["add_type"])) то вызвать js-функцию как echo 'select_type();'... это зачем? Пусть есть N зависимых списков и пусть они формируются динамически по запросу от предыдущего списка. То есть при запросе страницы первый список заполнен, остальные пусты. Выбор в списках, это ajax запрос и заполнение/изменение списка для которого данные запрашивались данными возвращенными сервером. Если нужно запомнить ранее сделанный выбор в списках, то страницу нужно отдавать уже с заполненными списками для которых данные запрашивались. То есть серверный сценарий сразу формирует html код всех этих списков. |
| Часовой пояс GMT +3, время: 00:47. |