Алгоритм таков: База имеет столбцы: 'id','parent_id','name', в столбце таблицы 'parent_id' для городов, указан 'id'региона. Из MySQL базы выбираются все строки сразу. При этом для второго селекта, 'id' региона, указан как class в OPTION.
Вот что у меня получилось:
<? $result = mysql_query("SELECT * FROM `geo`", $db);?>
<SELECT id='geo1'>
<OPTION disabled selected>выберите регион</OPTION>
<?while($geo = mysql_fetch_assoc($result)): if($geo['parent_id'] == 0): ?>
<OPTION value="<?=$geo['id'];?>"><?=$geo['name'];?></OPTION>
<?endif; endwhile;?>
</SELECT>
<BR>
<SELECT id='geo2'>
<OPTION disabled selected>выберите город</OPTION>
<?mysql_data_seek($result, 0); ?>
<?while($geo = mysql_fetch_assoc($result)): if($geo['parent_id'] > 0): ?>
<OPTION class="<?=$geo['parent_id'];?>" value="<?=$geo['id'];?>"><?=$geo['name'];?></OPTION>
<?endif; endwhile;?>
</SELECT>
При изменении в первом SELECT с id='geo1', мы прячем все OPTION, и показываем те, что нам нужны, с нужным классом региона:
$('#geo1').live('change', function()
{
$("#geo2 OPTION").css("display", "none");
$("."+this.value).css("display", "block");
}
Или тоже самое, через свойства hidden:
$('#geo1').live('change', function()
{
$("#geo2 OPTION").prop("hidden", true);
$("#geo2 OPTION."+this.value).prop("hidden", false);
}
Вопрос вот в чем, почему данный вариант работает только в FF, в остальных браузерах, второй SELECT работает только когда выбрано первое значение в первом SELECT'e, при других значениях первого SELECT'a второй - пуст!
Помогите разобраться, как можно это исправить? :(
Спустя 14 минут, 31 секунда (10.04.2012 - 15:07) killer8080 написал(а):
Спустя 31 минута, 36 секунд (10.04.2012 - 15:38) linf написал(а):
| Цитата (killer8080 @ 10.04.2012 - 16:07) |
| http://tigir.com/javascript_select.htm |
Безусловно материал ценный, но мой вопрос был в том, как показать некоторые элементы из уже существующих, а остальные скрыть?
Спустя 5 минут, 40 секунд (10.04.2012 - 15:44) killer8080 написал(а):
| Цитата (linf @ 10.04.2012 - 15:38) |
| но мой вопрос был в том, как показать некоторые элементы из уже существующих, а остальные скрыть? |
Твой вариант не валидный, нельзя скрывать option через css. Если в каких то браузерах этот трюк проходит, то это хак, а не стандарт.
Спустя 9 часов, 34 минуты, 49 секунд (11.04.2012 - 01:19) linf написал(а):
| Цитата (killer8080 @ 10.04.2012 - 16:44) | ||
Твой вариант не валидный, нельзя скрывать option через css. Если в каких то браузерах этот трюк проходит, то это хак, а не стандарт. |
Пробовал даже так:
$("#geo2 OPTION").hide();
$("."+this.value).show();
Но результат аналогичный.
Спустя 11 часов, 1 минута, 50 секунд (11.04.2012 - 12:21) killer8080 написал(а):
| Цитата (linf @ 11.04.2012 - 01:19) |
| Но результат аналогичный. |
Ну а чего ты ждал? Что jQ анимацию делает не через css
Единственный правильный способ скрыть опшин, это его удалить. И в той статье это все подробно расписано.
Спустя 11 часов, 47 минут, 31 секунда (12.04.2012 - 00:08) linf написал(а):
| Цитата (killer8080 @ 11.04.2012 - 13:21) | ||
Ну а чего ты ждал? Что jQ анимацию делает не через css Единственный правильный способ скрыть опшин, это его удалить. И в той статье это все подробно расписано. |
Благодарю, так и сделал.
_____________
Live in new format =)