Статус:
Offline
Реєстрація: 04.07.2008
Повідом.: 682
Реєстрація: 04.07.2008
Повідом.: 682
Хочу сделать цепочку селектов.
Страна -> город -> район.
Сервер отдает мне чистый и правильный json
А на клиентской стороне, у меня не могут заполнятся селекты((
Ответ от сервера - есть, json строка есть.
Вот фронтенд.
кого есть какие мысли ?
Буду рад помощи))
Страна -> город -> район.
Сервер отдает мне чистый и правильный json
PHP:
echo "{results:[{value:1, name:'Option1'}, {value:2, name:'Option2'}]}";А на клиентской стороне, у меня не могут заполнятся селекты((
Ответ от сервера - есть, json строка есть.
Вот фронтенд.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script>
(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("gettype.php",{country:countryValue},function(data) { tmpSelect.fillSelect(data).attr('disabled','');/* adjustModel();*/ alert(data); });
}
};
// выбор модели
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("gettype.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>
<style>
ul{text-decoration: none;
list-style-type:none;
}
select,input{width:200px;height:25px;}
form{border:25px solid;}
</style>
</head>
<body>
<select id="temp"></select>
<div align="center">
<form action="index.php" method="post" autocomplete="off" name="form_q" id="form_q">
<div >
<ul >
<li >
<p>Тип: </p>
<select id="country">
<option value="1">q</option>
<option value="2">w</option>
<option value="3">e</option>
<option value="4">r</option>
<option value="5">t</option>
<option value="6">y</option>
</select>
</li>
<li >
<p>Марка: </p>
<select id="auto" name="country" >
</select>
</li>
</ul>
<ul >
<li>
<p>Год: </p>
<select id="PartYear" >
<option selected="" value="0">- выбрать -</option>
</select>
</li>
<li>
<p>Модель: </p>
<select id="model" >
<option value="">- выбрать -</option>
</select>
</li>
</ul>
</div>
<div >
<ul >
<li >
<input type="submit" value="Отправить"/> <br />
</li>
</ul>
</div>
</form>
</div>
</body>
</html>кого есть какие мысли ?
Буду рад помощи))
Останнє редагування:
