Перейти к публикации

Динамический select городов при регистрации


Рекомендованные сообщения

Добрый день уважаемые. На данном этапе разработки своего строительного проекта столкнулся с проблемой, пытаюсь сделать динамические selet с выбором Страны, Региона и Города при регистрации. Это все пытаюсь сделать при помощи этих вот исходников через Jquery:

Файл index.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>
Файл cascadeSelectAuto.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

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:"Выбрать модель"}]';

	}

}

?>

Если вдруг кто подскажет, как реализовать чтобы это все работало при регистрации, то отблагодарю щедро.

Занесение в БД и т.п. я сделаю сам, главное чтобы динамика заработала.

Версия скрипта 9.0

Изменено пользователем CpaHb
Ссылка на сообщение
Поделиться на других сайтах

Проект CpaHu.NET

Кто поможет сделать при регистрации динамический выбор страны -> региона -> города - отблагодарю хорошо. Главное чтобы все это было кроссобраузерно и работало без перезагрузки страницы.

Изменено пользователем CpaHb
Ссылка на сообщение
Поделиться на других сайтах

Привет, написал в личку.

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...