Jquery two sets of 3 comboxboxes - one set listening on the other
I have a weird problem , below are two simple get calls and returning HTML from the other file. The HTML I am receiving has 3 comboxes and events on them selecting one combox populates other. Every thing works fine.
If I add the receiving HTML to the DIV I have. But if I call the file two times and add it to the two divs. If I select one combobox on the first set, even the second set also changing. Whatever the events on the first set of 3 boxes are automatically happening on the second set too and this is vice versa. But I want these two sets to be independent.
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>
Returning HTML ( Cut down the CSS and values to make it simple ):
<!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 );
开发者_StackOverflow社区 }
}
$("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>
Are you trying to make a "cascading dropdown"? Do a few google searches for that, if you are intending on hooking up to a database... and displaying all of the "makes" based on a "year" selection, and then all of the "models" based on the previous "year" and "make" selections... I had several different versions of this, but have finally come up with a very involved car picker system... see it live at http://pulsedrivers.com :) Just search for cascading dropdowns and you will find lots of great examples on how to do so.
We had faced the same problem and this is how we resolved it.
We prefixed the controls with the request (ex. GetCar(Honda) will prefix the controls as Honda_Make, Honda_Model, Honda_Year). This enabled us to get unique controls whenever we want that view (we use MVC). The way we handled the events is by passing in the control to the function (ex. PopulateYear(YearDropdown); and the way we call that function is PopulateYear($("#Honda_Year"));
加载中,请稍侯......
精彩评论