Доброго времени суток, друзья. Я еще в процессе обучения, и пишу первый сайт. И вот выскочила такая задача: необходимы 2 <select>-a зависимые друг от друга; то есть по выбору в первом - во втором должны появляться те позиции, которые соответствуют позиции выбранной в первом <select>; По выбору в одном из 2х<select>-ов должно перекидывать на другой шаблон и добавлять в него информацию из БД. Информация в <select>-ах тоже из БД и блок с <select>-ами подключен на всех ключевых страницах сайта. Подскажите пожалуйста порядок написания, примерный хотя бы; что использовать. А дальше я постараюсь сам, все таки хочется понять принцип (да и никто не будет это делать).
(Тематика сайта - космос (игра), а точнее карты - первый <select> - Галактики, второй - Системы в галактиках)
Спасибо.
Чуть не забыл, самое главное. Так как будет зависимость второго от первого, а при выборе <option>-a в первом <select>-e будет перебрасывать на другую страницу, важно чтобы ПЕРВЫЙ <select> не обнулялся, для возможности выбора систем принадлежащих этой галактике.
1. Тали Сергей - 27 Июня, 2015 - 14:04:29 - перейти к сообщению
2. DeepVarvar - 27 Июня, 2015 - 15:48:11 - перейти к сообщению
3. Тали Сергей - 27 Июня, 2015 - 16:52:52 - перейти к сообщению
DeepVarvar пишет:
http://forum.php.su/topic.php?forum=1&topic=8828&postid=1429822639#1429822639
Спасибо, буду разбираться
(Добавление)
DeepVarvarDeepVarvar
Благодарен за скрипт, но jqure пока знаю не так хорошо, немогли бы вы откоментировать этот блок____________________________ _______________________________
CODE (javascript):
скопировать код в буфер обмена
скопировать код в буфер обмена
- childName = sel.attr('data-child');
- if (childName) { child = initChain(childName);
- if (child) { child.attr('disabled', true); }
- sel.data('child', child);
- }
________________________________ ________________________________ _____
CODE (javascript):
скопировать код в буфер обмена
скопировать код в буфер обмена
- $(function() {
- initChain('level_one');
- function initChain(name)
- {
- var childName, child, sel = $('select[name="' + name + '"]');
- if (!sel.length) { return false; }
- childName = sel.attr('data-child');
- if (childName) { child = initChain(childName);
- if (child) { child.attr('disabled', true); }
- sel.data('child', child);
- }
- sel.on('change', function() {
- var val = parseInt(sel.val(), 10);
- if (!val) {
- resetChain(child);
- } else if (child) {
- $.ajax({
- type : 'POST',
- url : '/selects-data.txt',
- data : {id: val},
- dataType : 'json',
- success : function(response) {
- setChain(child, response);
- }
- });
- }
- });
- return sel;
- }
- function resetChain(sel)
- {
- if (sel) {
- resetChain(sel.data('child'));
- sel.html('').attr('disabled', true);
- }
- }
- function setChain(sel, data)
- {
- var
- i,
- child = sel.data('child');
- if (child) {
- resetChain(child);
- }
- sel.html('');
- for (i in data) {
- sel.append(
- '<option value="' + data[i].value +
- '">' + data[i].description + '</option>'
- );
- }
- sel.removeAttr('disabled');
- }
- });