Форум PHP программистов > динамичные select

[ Поиск ] - [ Пользователи ] - [ Календарь ]

pultter

18.09.2009 - 21:35

Подскажите пожалуйста где можно взять код динамичных select'ов. т.е. выбирается допустим, страна (в первом select'е), ajax подгружает в соответствии с выбранной страной регионы во второй select и т.д.

Спустя 6 минут, 26 секунд (18.09.2009 - 20:41) Gabriel написал(а):

можно было не полениться и залезть в раздел яваскрипт
тыц
второй пост

Спустя 10 минут, 18 секунд (18.09.2009 - 20:52) pultter написал(а):

спасибо, Gabriel

Спустя 4 дня, 22 часа, 12 минут, 48 секунд (23.09.2009 - 19:04) pultter написал(а):

есть код, но не знаю как подключить его к mysql. пробовал - не получается. подскажите если не трудно. в javascript не соображаю.. с php знаком.
Заранее благодарю

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<style type="text/css">
body {
position: relative;
margin: 0;
padding: 0;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 9pt;
color: #000;
}
.border {
float: left;
margin: 10px 0 0 5px;
}
label {
padding-left: 5px;
}
select {
width: 130px;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 9pt;
color: #000;
}
</style>
<script type="text/javascript">
(function($){
// очищаем select
$.fn.clearSelect = function() {
return this.each(function(){
if(this.tagName=='SELECT') {
this.options.length = 0;
$(this).attr('disabled','disabled');
}
});
}
// заполняем select
$.fn.fillSelect = function(dataArray) {
return this.clearSelect().each(function(){
if(this.tagName=='SELECT') {
var currentSelect = this;
$.each(dataArray,function(index,data){
var option = new Option(data.text,data.value);
if($.support.cssFloat) {
currentSelect.add(option,null);
} else {
currentSelect.add(option);
}
});
}
});
}
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){

// выбор автомобиля
function adjustAuto(){
var countryValue = $('#country').val();
var tmpSelect = $('#auto');
if(countryValue.length == 0) {
tmpSelect.attr('disabled','disabled');
tmpSelect.clearSelect();
adjustModel();
} else {
$.getJSON('cascadeSelectAuto.php',{country:countryValue},function(data) { tmpSelect.fillSelect(data).attr('disabled',''); adjustModel(); });

}
};
// выбор модели
function adjustModel(){
var countryValue = $('#country').val();
var autoValue = $('#auto').val();
var tmpSelect = $('#model');
if(countryValue.length == 0||autoValue.length == 0) {
tmpSelect.attr('disabled','disabled');
tmpSelect.clearSelect();
} else {
$.getJSON('cascadeSelectModel.php',{country:countryValue,auto:autoValue},function(data) { tmpSelect.fillSelect(data).attr('disabled',''); });
}
};

$('#country').change(function(){
adjustAuto();
}).change();
$('#auto').change(adjustModel);
$('#model').change(function(){
if($(this).val().length != 0) { alert('Выбор сделан!'); }
});

});
</script>
</head>
<body>
<div class="border">
<label>Страна</label><br />
<select id="country">
<option value="">Выбрать страну</option>
<option value="1">Германия</option>
<option value="2">Ю.Корея</option>
<option value="3">Япония</option>
</select>
</div>
<div class="border">
<label>Автомобиль</label><br />
<select id="auto" disabled="disabled"></select>
</div>
<div class="border">
<label>Модель</label><br />
<select id="model" disabled="disabled"></select>
</div>
</body>
</html>

это был cascadeSelect.html

а вот это cascadeSelectAuto.php:

PHP

<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
    
    switch($_GET['country']) {
           case '1':
           print '[{value:"",text:"Выбрать автомобиль"},{value:"1",text:"Audi"},{value:"2",text:"BMW"},{value:"3",text:"Opel"}]';
           break;
           case '2':
           print '[{value:"",text:"Выбрать автомобиль"},{value:"1",text:"Daewoo"},{value:"2",text:"Hyundai"},{value:"3",text:"KIA"}]';
           break;
           case '3':
           print '[{value:"",text:"Выбрать автомобиль"},{value:"1",text:"Honda"},{value:"2",text:"Mazda"},{value:"3",text:"Toyota"}]';
           break;
           default:
           print '[{value:"",text:"Выбрать автомобиль"}]';
           break;
    }
    
}

а ето cascadeSelectModel.php:

PHP

<?php
header('Content-Type: text/html; charset=utf-8');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
    
    if($_GET['country']==1) {
        switch($_GET['auto']) {
            case '1':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"A4"},{value:"2",text:"Q7"},{value:"3",text:"TT"}]';
            break;
            case '2':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"6ER"},{value:"2",text:"M"},{value:"3",text:"X6"}]';
            break;
            case '3':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Astra"},{value:"2",text:"Corsa"},{value:"3",text:"Vectra"}]';
            break;
            default:
            print '[{value:"",text:"Выбрать модель"}]';
            break;
        }
    } elseif($_GET['country']==2) {
        switch($_GET['auto']) {
            case '1':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Matiz"},{value:"2",text:"Nexia"}]';
            break;
            case '2':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Accent"},{value:"2",text:"Elantra"},{value:"3",text:"Sonata"}]';
            break;
            case '3':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Carnival"},{value:"2",text:"Picanto"},{value:"3",text:"Spectra"}]';
            break;
            default:
            print '[{value:"",text:"Выбрать модель"}]';
            break;
        }
    } elseif($_GET['country']==3) {
        switch($_GET['auto']) {
            case '1':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Accord"},{value:"2",text:"Civic"},{value:"3",text:"CR-V"}]';
            break;
            case '2':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Mazda 3"},{value:"2",text:"Mazda 5"},{value:"3",text:"Mazda 6"}]';
            break;
            case '3':
            print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Corolla"},{value:"2",text:"LandCruiser"},{value:"3",text:"RAV4"}]';
            break;
            default:
            print '[{value:"",text:"Выбрать модель"}]';
            break;
        }
    } else {
        print '[{value:"",text:"Выбрать модель"}]';
    }
}

Спустя 34 минуты, 30 секунд (23.09.2009 - 19:39) SunSet написал(а):

pultter
А он и не предназначен для подключения к базе. Нужно добрую половину переделывать, чтоб он значения из базы вытягивал.

_____________
Напишу индусский код. Бесплатно

Быстрый ответ:

Здесь расположена полная версия этой страницы.