У меня странная проблема, ниже приведены два простых вызова get и возврат HTML из другого файла.HTML-код, который я получаю, содержит 3 комбокса, и события на них, выбирая один комбокс, заполняют другой.Все работает отлично.
Если я добавлю полученный HTML-код в DIV, который у меня есть.Но если я вызову файл два раза и добавлю его к двум элементам div.Если я выберу один комбинированный список в первом наборе, даже второй набор также изменится.Какие бы события в первом наборе из 3 блоков не происходили автоматически и во втором, и это наоборот.Но я хочу, чтобы эти два набора были независимыми.
jQuery:
$.get("cars.php",{Make:'GM', Model:'Chevy', Year:'2009'},
function(percar){
$("#perPlace").append(percar);
});
$.get("cars.php",{Make:'Honda', Model:'Civic', Year:'2008'},
function(curcar){
$("#curPlace").append(curcar);
});
HTML:
<div id="perPlace" >
</div>
<div id="curPlace">
</div>
Возврат HTML (Сократите CSS и значения, чтобы сделать егопросто):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Select test</title>
<script type="text/javascript" src="../jquery-1.5.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("select#make").change(function(){
var makeVar = $(this).val();
var jqxhr =$.getJSON("select.php",{make: makeVar, ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
if( i==0){
populateYear(j[i].optionValue );
}
}
$("select#model").html(options);
}).error(function(xhr, ajaxOptions, thrownError) { alert(xhr.statusText); })
})
$("select#model").change(function(){
populateYear($(this).val());
})
})
function populateYear(modelID){
$.getJSON("select.php",{model: modelID, ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
}
$("select#year").html(options);
})
}
</head>
<div class="field_container">
<select id="make">
<option value="1">GM</option>
<option value="2">HONDA</option>
<option value="3">FORD</option>
</select>
<select id="Model">
<option value="1">Chevy</option>
<option value="2">Pontiac</option>
</select>
<select id="Year">
<option value="1">2000</option>
<option value="2">2001</option>
<option value="3">2002</option>
</select>
</div>