Как выбрать option если он есть в get переменной
Есть зависимые выпадаюшие списки:
<select name="cat" id="cat"> <option value="">Все категории</option> <option value="1">Одежда</option> <option value="2">Обувь</option> </select> <select id="size" name="size"></select> есть массив: <script type="text/javascript"> var syncList1 = new syncList; syncList1.dataList = { '1': // Одежда { '':'Выбирите размер', '1':'XS', '2':'S', '3':'M', '4':'L', '5':'XL', '6':'XXL' }, '2': // Обувь { '':'Выбирите размер', '7':'38', '8':'39', '21':'40', '10':'41', '11':'42', '12':'43', '13':'44', '14':'45' } }; syncList1.sync("cat","size"); // Синхронизация списков </script> Вопрос как после загрузки страницы выделить option если он есть в get переменной? |
А как выглядит get-переменная? Может select.selectedIndex = номер_option'а?
|
Я наверное ни так выразился мне нужно сделать так что бы если например в адресной строке есть GET_переменные cat=1&size=3 то в первом SELECTе будет отображаться Одежда, а во втором размер M выбор первого SELECTа выводится и так движком правильно, а вот с размерами выводится первый который есть в массиве
Ниже полный код: <script type="text/javascript"> function syncList() { } //Метод sync() - принимает список из значений атрибутов id элементов SELECT, образующих связанный список и запускает их синхронизацию syncList.prototype.sync = function() { //Перебираем аргументы (id элементов SELECT) и назначаем событиям onChange селектов, с соответствующими id, функцию-обработчик. //В качестве обработчика выступает второй метод объекта syncList - _sync (напрямую его вызывать не нужно) //Обработчик назначается всем элементам SELECT кроме последнего в списке аргументов, т.к. последний не влияет ни на какой другой элемент SELECT и с ним не нужно синхронизироваться. for (var i=0; i < arguments.length-1; i++) document.getElementById(arguments[i]).onchange = (function (o,id1,id2){return function(){o._sync(id1,id2);};})(this, arguments[i], arguments[i+1]); document.getElementById(arguments[0]).onchange();//запускаем обработчик onchange первого селекта, чтобы при загрузке страницы заполнить дочерние селекты значениями. } //служебный метод _sync - срабатывает при смене выбранного элемента в текущем (старшем) элементе SELECT (по его событию onChange) и изменяет содержимое зависимого селекта на основании значения выбранного в старшем селекте. syncList.prototype._sync = function (firstSelectId, secondSelectId) { var firstSelect = document.getElementById(firstSelectId); var secondSelect = document.getElementById(secondSelectId); secondSelect.length = 0; //обнуляем второй (подчиненный) SELECT if (firstSelect.length>0)//если первый (старший) SELECT не пуст { //из свойства dataList, с данными для заполнения подчиненных селектов, берем ту часть данных, которая соответствует именно значению элемента, //выбранного в первом селекте, и определяет содержимое подчиненного элемента SELECT. var optionValue = firstSelect.options[ firstSelect.selectedIndex==-1 ? 0 : firstSelect.selectedIndex].value; var optionData = this.dataList[optionValue]; if (!optionData) optionData = this.dataList[parseInt(optionValue)]; //заполняем второй (подчиненный) селект значениями (создаем элементы option) for (var key in optionData || null) secondSelect.options[secondSelect.length] = new Option(optionData[key], key); //если в старшем SELECT-е нет выделенного пункта, выделяем первый if (firstSelect.selectedIndex == -1) setTimeout( function(){ firstSelect.options[0].selected = true;}, 1 ); // вытаскиваем GET_переменную size var url = document.location.href; var getsize = url.match(/size=(\w+)&/i)[1]; //если переменная GET существует то выбираем пукт равный ей if (secondSelect.length==getsize) setTimeout( function(){ secondSelect.options[getsize].selected = true;}, 1 ); //если во втором списке нет выделенного пункта, выделяем первый его пункт if (secondSelect.length>0) setTimeout( function(){ secondSelect.options[0].selected = true;}, 1 ); } //если второй (подчиненный) селект имеет в свою очередь свои подчиненные селекты (те, для которых он главный), //то запускаем его обработчик onchange, чтобы изменить его подчиненные селекты secondSelect.onchange && secondSelect.onchange(); }; </script> <select name="cat" id="cat"> <option value="">Все категории</option> <option value="1">Одежда</option> <option value="2">Обувь</option> </select> <select id="size" name="size"></select> <script type="text/javascript"> var syncList1 = new syncList; syncList1.dataList = { '1': // Одежда { '':'Выберите размер', '1':'XS', '2':'S', '3':'M', '4':'L', '5':'XL', '6':'XXL' }, '2': // Обувь { '':'Выберите размер', '7':'38', '8':'39', '21':'40', '10':'41', '11':'42', '12':'43', '13':'44', '14':'45' }; syncList1.sync("cat","size"); // Синхронизация списков </script> С 42 строки по 46 я пытался дописать функцию но не вышло, кто нибуть подскажет что не правильно? |
Ну можно при помощи location.search получить строку запроса из урла, например регуляркой найти нужную переменную и ее значение, а потом, исходя из полученных данных, уже действовать так как нужно.
|
В том то и дело что значение я нашел
var url = document.location.href; var getsize = url.match(/size=(\w+)&/i)[1]; Но вот не могу составить правильное условие. Мне ещё нужно сделать так что бы размер устанавливался только один раз при обновлении страницы (если он конечно есть в переменной). Тоесть если я например потом выберу другое значение в первом SELECTе то он бы устанавливался на первое значение выбранного массива. |
не называйте объекты массивами, из-за вашей каши невозможно понять что вы хотите. Начнем с того, что: syncList1.dataList - это объект.
|
getsize у вас получается строка, а вам нужно число. Значит сравнивать в условии надо так: if (secondSelect.length == parseInt(getsize)).
Gozar, ну это типа ассоциативный массив. krol, кстати, можно было б и просто массивом обойтись, раз уж индексы числовые. |
Часовой пояс GMT +3, время: 11:22. |