Работа с выпадающим списком (SELECT)
Доброго времени суток всем. Мой вопрос может показатся кому то и ламерским но все же.
для начала кусок кода
<form method="get" action="./dir.php">
<script language=javascript>var fil = ''</script>
<div align="left">Новая характеристика 1</div>
<SELECT name="filter1" style="margin-top: 5px;">
<option style="color: #AAAAAA" value="0">Выбрать »</option>
<option value="1">1!</option>
<option value="2">2!</option>
<option value="3">3!</option>
</SELECT>
<script language=javascript>
if (this.filter1!=0) var fil=1
document.write('<input type=hidden value='+fil+' name=filter>')
</script>
<br>
<input type="submit" value="Искать">
</form>
тоесть по логике выходит так, если значение filter1 равно 0 - то не происходит никаких действий, а если не равно то переменная fil равна 1 токо заморочка в том что по факту this.filter1 возвращает (как мне сказали) не значение а реплику undefined. От сюда вопрос - как вытащить id активного пунтка из этого списка? (на всякий случай, списков в форме может быть несколько) |
Попробуйте
this.options[this.selectedIndex].value; Только у Вас скрипт не связан с Selectom!!! Я так думаю :yes: |
Цитата:
если говорить о всей заморочке то мне на форме селектов надо сделать следующее на основет тех пунтков каторый юзер выбирает в селектах нада сформировать еще один параметр формы (ясное дело он в хайдене), после чего все параметры выкинуть GET'ом. Но вот проблемка =) Логику вроде понимаю а по факту - руки матом. папробывал как Вы показали, чето не выходит, простая хтмл в ИЕ ругается на то что объект НУЛЛ или не в ОБЪЕКТЕ. ниже ложу сгенереный код всей Формы. Может я дето по ходу еще нафтыкал :(
<form method="get" action="./dir.php">
<script language=javascript>var fil = ''</script>
<div align="left"><span class="productSpecialPrice"><strong>характеристика 1</strong></span></div>
<SELECT name="filter1" style="margin-top: 5px;">
<option style="color: #AAAAAA" value="0">Выбрать »</option>
<option value="1">1!</option>
<option value="2">2!</option>
<option value="3">3!</option>
</SELECT>
<script language=javascript>
if (this.options[this.selectedIndex].value!=0)
var fil=fil+'and1'
</script>
<div align="left"><span class="productSpecialPrice"><strong>характеристика 2</strong></span></div>
<SELECT name="filter2" style="margin-top: 5px;">
<option style="color: #AAAAAA" value="0">Выбрать »</option>
<option value="5">весна</option>
<option value="6">лето</option>
<option value="7">осень</option>
</SELECT>
<script language=javascript>
if (this.options[this.selectedIndex].value!=0)
var fil=fil+'and2'
</script>
<div align="left"><span class="productSpecialPrice"><strong>характеристика 3</strong></span></div>
<SELECT name="filter3" style="margin-top: 5px;">
<option style="color: #AAAAAA" value="0">Выбрать »</option>
<option value="8">упячга</option>
<option value="11">ебрило</option>
</SELECT>
<script language=javascript>
if (this.options[this.selectedIndex].value!=0)
var fil=fil+'and3'
</script>
<script language=javascript>
document.write('<input type="text" value="'+fil+'" name="filter">')
</script>
<input type=hidden value="" name="search_words">
<br>
<input type="submit" value="Искать">
</form>
|
Bogus,
Скажите, что вы хотите сделать? Просто есть подозрение, что вы все делаете неправильно. |
Цитата:
Постараюсь изложить свое хотенее :p мой движок магазина может создавать фильтры по характеристикам в виде выпадающего списка. Но - стандартная форма скрипта неустраивает тем что по дефолу пашит так - открыл список, кликнул на пунктик и тебя тутже редиректит на результат, хочешь еще фильтр - будь любезен, щелкай дальше. теперь что я сделал: убрал этот редирект, согнал разные фильтры (списки) в одну форму, добавил пару полей hidden с доп параметрами каторые должны уходить вкуче со всем в GET запрос. что не получается: один из параметров должен просто перечислять фильтры каторые были выбраны юзером (к примеру: filter=and1and2and3 каждый andN это отдельный параметр). и вот как я подумал это провернуть, решил обьявить в начале формы переменную fil, а патом после каждого селекта проверяю чтобы id выбраного пункта небыл равен 0 (нулю), так как 0 это единственное значение каторое я могу указать сам и оно 100% не совпадет не с одним ID из движка. Если id пункта не равен нулю, значит юзер сделал выбор и значит параметр этого фильтра нужно добавить, соответсвенно обновляю переменную fil (var fil=fil+'andN'). После чего в конце формы скриптом вписываю нужное хайден поле и вставляю туда в value свою готовую переменную за счет чего и получаю полностью собраных GET запрос. ток вот не пашит. сори за много букв. старался как мог. |
Bogus,
Тогда вы делаете неправильно. Дело в том, что JavaScript, в отличии от php, должен работать динамически. Т.е. работать, основываясь на событиях, происходящих в браузере, и изменять состояние уже сформированного документа. Поэтому, вы не должны писать код "последовательно" и использовать конструкцию document.write, вы должны установить обработчик события submit формы, которое будет устанавливать необходимое значение hidden поля. Вот один из примеров такой работы, просто я не смог вашу задачу понять до конца, поэтому не точно её решение:
<script type="text/javascript">
// Описываем функцию, которая будет выполняться
// при отправке формы:
// form - ссылка на форму
// filters - хеш фильтров и параметров
function addFilters(form, filters) {
// Получаем элемент нашего "фильтра"
var filter_query = document.getElementsByName("filter")[0];
// Очищаем:
filter_query.value = "";
// "Аналог" foreach из php:
for (var i in filters) if (filters.hasOwnProperty(i)) {
// Получаем фильтр по имени (первый элемент с таким именем):
var filter = document.getElementsByName(i)[0];
// Лучше делать проверку, что выбран не первый вариант:
if (filter.selectedIndex > 0) {
// Теперь добавляем нужный нам "параметр":
filter_query.value += filters[i];
}
}
}
</script>
<!--
В форме указываем наш обработчик , первый параметр - форма,
второй - хеш, в котором ключи - имена фильтров, а значения -
добавляемый в запрос параметр:
-->
<form method="get" onsubmit="addFilters(this, {'filter1':'and1', 'filter2':'and2'})" action="./dir.php">
<div align="left">Новая характеристика 1</div>
<SELECT name="filter1" style="margin-top: 5px;">
<option style="color: #AAAAAA" value="0">Выбрать »</option>
<option value="1">1!</option>
<option value="2">2!</option>
<option value="3">3!</option>
</SELECT>
<SELECT name="filter2" style="margin-top: 5px;">
<option style="color: #AAAAAA" value="0">Выбрать »</option>
<option value="1">1!</option>
<option value="2">2!</option>
<option value="3">3!</option>
</SELECT>
<br>
<input type="hidden" name="filter" value="" />
<input type="submit" value="Искать">
</form>
|
ну впринципе да, написать ф-ю это действительно выход. только вот поскольку содержимое формы может менятся в зависимости от кол-ва select'a то я не понимаю как мне передать все данные в форму
addFilters(this, {'filter1':'and1', 'filter2':'and2'}
я не смогу перечислить все фильтры в ф-и подобным образом если контент изменится (к примеру добавится еще один фильтр). так получается что я должен при каждом изменении формы редактировать вызов ф-и. можно как то одним махом заслать абсолютно все переменные формы в ф-ю и там уже их перебирать и строить свой GET запрос? |
думал если отправить в ф-ю всю форму то она уйдет туда массивом выбраных значений :( уже понял что уходит вся форма цеиком =)
скажите могу ли я как то определить кол-во елементов select в форме, ну и их имена заодно или чтонибуть чтобы нормально получать доступ к ним и их значениям? или может можно как то отправить в форму масив данных? |
Цитата:
var sel = document.body.getElementsByTagName('select');
sel.length;
Цитата:
// имя первого select'а sel[0].name; // sel[1] - второго, sel[2] - третьего и т.д. Цитата:
sel[0].value;// значение первого select'а и т.д. по аналогии с name В общем в переменной sel будет храниться масив select'ов всей страницы, к свойствам, атрибутам и значениям которых вы имеете доступ. |
Bogus,
А имена параметров и фильтров как-то связанны? |
и вот решение
да там связь простейшая =)
вообщем задачю решил написанием таки функци =) немного мозгов, немного фантазии + google и все готово. код моей функции
function build_query(data)
{
var elem = data.elements
var filter_str1 = ''
var filter_str2 = ''
for(var i=0;i<elem.length;i++)
if (elem[i].type === 'select-one')
{
var filter_str1 = filter_str1+elem[i].name+'='+elem[i].value+'&'
if (elem[i].value!=0)
{
var filter_str2 = filter_str2+elem[i+1].value
}
}
document.location.href='http://site.com/dir.php?search_words=&'+filter_str1+'filter='+filter_str2
}
|
Zibba,
День добрый. Мне нужно на основании одного select заполнить другой,- например в одном список регионов а в другом список городов по регионам,- прошу помоч если есть возможность на serov2004@mail.ru |
помогите сделать раскрывающийся список на основании имеющегося
Zibba,
День добрый. Мне нужно на основании одного select заполнить другой,- например в одном список регионов а в другом список городов по регионам,- прошу помоч если есть возможность на serov2004@mail.ru |
Цитата:
По-твоему тут сидят люди, и от нечего делать чужие заказы бесплатно выполняют? |
Цитата:
Вот одна из реализаций подобного. Может кому пригодится: В HEAD вставляем:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var africaArray = new Array("('Select country','',true,true)",
"('Ethiopia')",
"('Somalia')",
"('South Africa')",
"('Other')");
var middleeastArray = new Array("('Select country','',true,true)",
"('Egypt')",
"('Iran')",
"('Israel')",
"('Kuwait')",
"('Lebanon')",
"('Morocco')",
"('Saudi Arabia')",
"('Syria')",
"('Turkey')",
"('U. A. Emirates')",
"('Other')");
var asiaArray = new Array("('Select country','',true,true)",
"('Armenia')",
"('Bangladesh')",
"('Cambodia')",
"('China')",
"('India')",
"('Indonesia')",
"('Japan')",
"('Malaysia')",
"('Myanmar')",
"('Nepal')",
"('Pakistan')",
"('Philippines')",
"('Singapore')",
"('South Korea')",
"('Sri Lanka')",
"('Taiwan')",
"('Thailand')",
"('Uzbekistan')",
"('Vietnam')",
"('Other')");
var europeArray = new Array("('Select country','',true,true)",
"('Albania')",
"('Austria')",
"('Belarus')",
"('Belgium')",
"('Bosnia')",
"('Bulgaria')",
"('Croatia')",
"('Cyprus')",
"('Czech Rep.')",
"('Denmark')",
"('Estonia')",
"('Finland')",
"('France')",
"('Germany')",
"('Greece')",
"('Hungary')",
"('Iceland')",
"('Ireland')",
"('Italy')",
"('Latvia')",
"('Liechtenstein')",
"('Lithuania')",
"('Luxembourg')",
"('Macedonia')",
"('Malta')",
"('Monaco')",
"('Netherlands')",
"('Norway')",
"('Poland')",
"('Portugal')",
"('Romania')",
"('Russia')",
"('Slovakia')",
"('Slovenia')",
"('Spain')",
"('Sweden')",
"('Switzerland')",
"('Ukraine')",
"('United Kingdom')",
"('Other')");
var australiaArray = new Array("('Select country','',true,true)",
"('Australia')",
"('New Zealand')",
"('Other')");
var lamericaArray = new Array("('Select country','',true,true)",
"('Costa Rica')",
"('Cuba')",
"('El Salvador')",
"('Guatemala')",
"('Haiti')",
"('Jamaica')",
"('Mexico')",
"('Panama')",
"('Other')");
var namericaArray = new Array("('Select country','',true,true)",
"('Canada')",
"('USA')",
"('Other')");
var samericaArray = new Array("('Select country','',true,true)",
"('Argentina')",
"('Bolivia')",
"('Brazil')",
"('Chile')",
"('Colombia')",
"('Ecuador')",
"('Paraguay')",
"('Peru')",
"('Suriname')",
"('Uruguay')",
"('Venezuela')",
"('Other')");
function populateCountry(inForm,selected) {
var selectedArray = eval(selected + "Array");
while (selectedArray.length < inForm.country.options.length) {
inForm.country.options[(inForm.country.options.length - 1)] = null;
}
for (var i=0; i < selectedArray.length; i++) {
eval("inForm.country.options[i]=" + "new Option" + selectedArray[i]);
}
if (inForm.region.options[0].value == '') {
inForm.region.options[0]= null;
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
window.history.go(0);
}
else {
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
window.history.go(0);
}
}
}
}
}
function populateUSstate(inForm,selected) {
var stateArray = new Array("('Select State','',true,true)",
"('Alabama')",
"('Alaska')",
"('Arizona')",
"('Arkansas')",
"('California')",
"('Colorado')",
"('Connecticut')",
"('Delaware')",
"('Columbia')",
"('Florida')",
"('Georgia')",
"('Hawaii')",
"('Idaho')",
"('Illinois')",
"('Indiana')",
"('Iowa')",
"('Kansas')",
"('Kentucky')",
"('Louisiana')",
"('Maine')",
"('Maryland')",
"('Massachusetts')",
"('Michigan')",
"('Minnesota')",
"('Mississippi')",
"('Missouri')",
"('Montana')",
"('Nebraska')",
"('Nevada')",
"('New Hampshire')",
"('New Jersey')",
"('New Mexico')",
"('New York')",
"('North Carolina')",
"('North Dakota')",
"('Ohio')",
"('Oklahoma')",
"('Oregon')",
"('Pennsylvania')",
"('Rhode Island')",
"('South Carolina')",
"('South Dakota')",
"('Tennessee')",
"('Texas')",
"('Utah')",
"('Vermont')",
"('Virginia')",
"('Washington')",
"('West Virginia')",
"('Wisconsin')",
"('Wyoming')");
if (selected == 'USA') {
for (var i=0; i < stateArray.length; i++) {
eval("inForm.country.options[i]=" + "new Option" + stateArray[i]);
}
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
window.history.go(0)
}
else {
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
window.history.go(0)
}
}
}
}
else {
}
if (selected == 'Other') {
newCountry = "";
while (newCountry == ""){
newCountry=prompt ("Please enter the name of your country.", "");
}
if (newCountry != null) {
inForm.country.options[(inForm.country.options.length-1)]=new Option(newCountry,newCountry,true,true);
inForm.country.options[inForm.country.options.length]=new Option('Other, not listed','Other');
}
}
if(inForm.country.options[0].text == 'Select country') {
inForm.country.options[0]= null;
}
}
// End -->
</script>
А в BODY вот это: <form name="globe"> <select name="region" onChange="populateCountry(document.globe,document.globe.region.options[document.globe.region.selectedIndex].value)"> <option selected value=''>Select Region</option> <option value='asia'>Asia</option> <option value='africa'>Africa</option> <option value='australia'>Australia</option> <option value='europe'>Europe</option> <option value='middleeast'>Middle East</option> <option value='lamerica'>Latin America</option> <option value='namerica'>North America</option> <option value='samerica'>South America</option> </select> <select name="country" onChange="populateUSstate(document.globe,document.globe.country.options[document.globe.country.selectedIndex].text)"> <option value=''><--------------------</option> </select> </form> |
| Часовой пояс GMT +3, время: 11:35. |