[jQuery] Re: Selects populating other selects from JSON data
on 9/12/09 8:02 AM, Alex Weber at alexwebe...@gmail.com wrote:
Hey, two suggestions:
First off, if you're using JSON data to populate it then I assume the
data will come from an external source and you are only generating it
in your script for testing purposes.
Actually, I wrote this for a friend that insists the data set is small and
wants to just embed it in the page.
In that case, perfect. If not,
and the data is actually hard-coded, then you shouldn't really be
doing it like this!
I would agree but I have no choice here.
Finally, what I would do and its really just matter of preference,
instead of doing this:
$(select[name='model']).empty();
$.each(model, function (){
$(select[name='model']).append('option value=' + this + '' +
this +
'/option') });
}
Agreed I missed this.
I would do the following:
var options = '';
$.each(model, function (){
html += 'option value=' + this + '' + this + '/option');
});
$(select[name='model']).html(options);
It should increase the performance because you cache all the data in a
variable and insert it into the select in one step, instead of
appending it during each iteration.
Using html() will overwrite the previous contents too, so no need to
use empty() either.
Well this is what I currently have. I think I am doing too many .each()
though. Isn't there a get or find that I can do to eliminate iterating
thru all sets to find the selected manufacturer then add the models?
Here is what I currently have.
$(document).ready(function () {
var items = {Aquatech : [Canon 5D Mark II,Nikon D3,Nikon
D3x,Canon 1D,Canon 1Ds,Canon 1Ds Mark II,Canon 1Ds Mark III,Canon
1D Mark III,Canon 30D,Canon EOS 5D,Canon 20D,Nikon D200,Nikon
D700,Canon 40D,Canon 50D,Nikon D300],
Canon : [Canon HF20,Canon SD800,Canon
A570,Canon G10,Canon G11],
Ikelite : [Olympus FE-360,Canon 20D,Canon
Rebel 350 / XT,Nikon D300,Canon Rebel 400 / XTi,Canon 30D,Canon
5D,Nikon D200,Nikon D40,Nikon D40x,Nikon D60,Olympus
SP-510,Olympus E-500,Canon G9,Nikon P5000,Nikon P5100,Nikon
D80,Nikon D90,Nikon P6000,Nikon D700,Canon 40D,Canon 50D,Canon
G10,Canon 5D Mark II,Canon Rebel 500 / T1i,Canon Rebel 450 / XSi],
Sony : [Sony W300]
};
$.each( items, function(brand){
$(select[name='manufacturer']).append('option value=' +
brand + '' + brand + '/option');
});
$(select[name='model']).attr('disabled','disabled');
$(select[name='manufacturer']).change( function(){
var man = this.value;
if( !this.selectedIndex )
$(select[name='model']).empty().attr('disabled','disabled');
$.each( items, function(brand, model){if(brand==man) {
var options=
'option value=Select a brand/option';
$.each(model,
function (){ options += 'option value=' + this + '' + this +
'/option'});
$(select[name='model']).removeAttr('disabled').html(options);
}
});
});
});
Any suggestions to simplify this would be appreciated.
Cheers,
Alex
On Sep 12, 12:48 am, Steffan A. Cline stef...@hldns.com wrote:
on 9/11/09 8:02 PM, Steffan Cline at stef...@hldns.com wrote:
on 9/11/09 5:15 PM, Steffan Cline at stef...@hldns.com wrote:
Perhaps I am not Googling correctly to find the data I am after.
I want to have a select that upon making a choice will add elements to a
second select. I've seen code to do this using ajax calls but what if I
embed the data into the page in a JSON format? I am looking for a good
example of this. Anyone seen one?
Ok, getting closer:
$(document).ready(function () {
var items = { Aquatech : [Canon 5D Mark II,Nikon D3,Nikon
D3x,Canon 1D,Canon 1Ds,Canon 1Ds Mark II,Canon 1Ds Mark III,Canon
1D Mark III,Canon 30D,Canon EOS 5D,Canon 20D,Nikon D200,Nikon
D700,Canon 40D,Canon 50D,Nikon D300],
Canon : [Canon HF20,Canon SD800,Canon
A570,Canon G10,Canon G11],
Ikelite : [Olympus FE-360,Canon 20D,Canon
Rebel 350 / XT,Nikon D300,Canon Rebel 400 / XTi,Canon 30D,Canon
5D,Nikon D200,Nikon D40,Nikon D40x,Nikon D60,Olympus
SP-510,Olympus E-500,Canon G9,Nikon P5000,Nikon P5100,Nikon
D80,Nikon D90,Nikon P6000,Nikon D700,Canon 40D,Canon 50D,Canon
G10,Canon 5D Mark II,Canon Rebel 500 / T1i,Canon Rebel 450 / XSi],
Sony : [Sony W300]
};
$.each( items, function(brand){
$(select[name='manufacturer']).append('option value=' +
brand + '' + brand + '/option');
});
$(select[name='manufacturer']).change( function(){
$
});
});
So, that is
[jQuery] Re: Selects populating other selects from JSON data
Hey, two suggestions:
First off, if you're using JSON data to populate it then I assume the
data will come from an external source and you are only generating it
in your script for testing purposes. In that case, perfect. If not,
and the data is actually hard-coded, then you shouldn't really be
doing it like this!
Finally, what I would do and its really just matter of preference,
instead of doing this:
$(select[name='model']).empty();
$.each(model, function (){
$(select[name='model']).append('option value=' + this + '' +
this +
'/option') });
}
I would do the following:
var options = '';
$.each(model, function (){
html += 'option value=' + this + '' + this + '/option');
});
$(select[name='model']).html(options);
It should increase the performance because you cache all the data in a
variable and insert it into the select in one step, instead of
appending it during each iteration.
Using html() will overwrite the previous contents too, so no need to
use empty() either.
Cheers,
Alex
On Sep 12, 12:48 am, Steffan A. Cline stef...@hldns.com wrote:
on 9/11/09 8:02 PM, Steffan Cline at stef...@hldns.com wrote:
on 9/11/09 5:15 PM, Steffan Cline at stef...@hldns.com wrote:
Perhaps I am not Googling correctly to find the data I am after.
I want to have a select that upon making a choice will add elements to a
second select. I've seen code to do this using ajax calls but what if I
embed the data into the page in a JSON format? I am looking for a good
example of this. Anyone seen one?
Ok, getting closer:
$(document).ready(function () {
var items = { Aquatech : [Canon 5D Mark II,Nikon D3,Nikon
D3x,Canon 1D,Canon 1Ds,Canon 1Ds Mark II,Canon 1Ds Mark III,Canon
1D Mark III,Canon 30D,Canon EOS 5D,Canon 20D,Nikon D200,Nikon
D700,Canon 40D,Canon 50D,Nikon D300],
Canon : [Canon HF20,Canon SD800,Canon
A570,Canon G10,Canon G11],
Ikelite : [Olympus FE-360,Canon 20D,Canon
Rebel 350 / XT,Nikon D300,Canon Rebel 400 / XTi,Canon 30D,Canon
5D,Nikon D200,Nikon D40,Nikon D40x,Nikon D60,Olympus
SP-510,Olympus E-500,Canon G9,Nikon P5000,Nikon P5100,Nikon
D80,Nikon D90,Nikon P6000,Nikon D700,Canon 40D,Canon 50D,Canon
G10,Canon 5D Mark II,Canon Rebel 500 / T1i,Canon Rebel 450 / XSi],
Sony : [Sony W300]
};
$.each( items, function(brand){
$(select[name='manufacturer']).append('option value=' +
brand + '' + brand + '/option');
});
$(select[name='manufacturer']).change( function(){
$
});
});
So, that is populating the first. Great. Now, it's a matter of finding the
chosen value and then adding the elements of the array to the select.
A nudge anyone?
This is ugly but works. Any suggestions on how to shorten it?
$(document).ready(function () {
var items = { Aquatech : [Canon 5D Mark II,Nikon D3,Nikon
D3x,Canon 1D,Canon 1Ds,Canon 1Ds Mark II,Canon 1Ds Mark III,Canon
1D Mark III,Canon 30D,Canon EOS 5D,Canon 20D,Nikon D200,Nikon
D700,Canon 40D,Canon 50D,Nikon D300],
Canon : [Canon HF20,Canon SD800,Canon
A570,Canon G10,Canon G11],
Ikelite : [Olympus FE-360,Canon 20D,Canon
Rebel 350 / XT,Nikon D300,Canon Rebel 400 / XTi,Canon 30D,Canon
5D,Nikon D200,Nikon D40,Nikon D40x,Nikon D60,Olympus
SP-510,Olympus E-500,Canon G9,Nikon P5000,Nikon P5100,Nikon
D80,Nikon D90,Nikon P6000,Nikon D700,Canon 40D,Canon 50D,Canon
G10,Canon 5D Mark II,Canon Rebel 500 / T1i,Canon Rebel 450 / XSi],
Sony : [Sony W300]
};
$.each( items, function(brand){
$(select[name='manufacturer']).append('option value=' +
brand + '' + brand + '/option');
});
$(select[name='manufacturer']).change( function(x){
var man = this.value;
$.each( items, function(brand, model){
if(brand==man) {
$(select[name='model']).empty();
$.each(model, function (){
$(select[name='model']).append('option value=' + this + '' + this +
'/option') });
}
});
});
});
Thanks
Steffan
[jQuery] Re: Selects populating other selects from JSON data
on 9/11/09 5:15 PM, Steffan Cline at stef...@hldns.com wrote:
Perhaps I am not Googling correctly to find the data I am after.
I want to have a select that upon making a choice will add elements to a
second select. I've seen code to do this using ajax calls but what if I
embed the data into the page in a JSON format? I am looking for a good
example of this. Anyone seen one?
Ok, getting closer:
$(document).ready(function () {
var items = {Aquatech : [Canon 5D Mark II,Nikon D3,Nikon
D3x,Canon 1D,Canon 1Ds,Canon 1Ds Mark II,Canon 1Ds Mark III,Canon
1D Mark III,Canon 30D,Canon EOS 5D,Canon 20D,Nikon D200,Nikon
D700,Canon 40D,Canon 50D,Nikon D300],
Canon : [Canon HF20,Canon SD800,Canon
A570,Canon G10,Canon G11],
Ikelite : [Olympus FE-360,Canon 20D,Canon
Rebel 350 / XT,Nikon D300,Canon Rebel 400 / XTi,Canon 30D,Canon
5D,Nikon D200,Nikon D40,Nikon D40x,Nikon D60,Olympus
SP-510,Olympus E-500,Canon G9,Nikon P5000,Nikon P5100,Nikon
D80,Nikon D90,Nikon P6000,Nikon D700,Canon 40D,Canon 50D,Canon
G10,Canon 5D Mark II,Canon Rebel 500 / T1i,Canon Rebel 450 / XSi],
Sony : [Sony W300]
};
$.each( items, function(brand){
$(select[name='manufacturer']).append('option value=' +
brand + '' + brand + '/option');
});
$(select[name='manufacturer']).change( function(){
$
});
});
So, that is populating the first. Great. Now, it's a matter of finding the
chosen value and then adding the elements of the array to the select.
A nudge anyone?
Thanks
Steffan
[jQuery] Re: Selects populating other selects from JSON data
on 9/11/09 8:02 PM, Steffan Cline at stef...@hldns.com wrote:
on 9/11/09 5:15 PM, Steffan Cline at stef...@hldns.com wrote:
Perhaps I am not Googling correctly to find the data I am after.
I want to have a select that upon making a choice will add elements to a
second select. I've seen code to do this using ajax calls but what if I
embed the data into the page in a JSON format? I am looking for a good
example of this. Anyone seen one?
Ok, getting closer:
$(document).ready(function () {
var items = {Aquatech : [Canon 5D Mark II,Nikon D3,Nikon
D3x,Canon 1D,Canon 1Ds,Canon 1Ds Mark II,Canon 1Ds Mark III,Canon
1D Mark III,Canon 30D,Canon EOS 5D,Canon 20D,Nikon D200,Nikon
D700,Canon 40D,Canon 50D,Nikon D300],
Canon : [Canon HF20,Canon SD800,Canon
A570,Canon G10,Canon G11],
Ikelite : [Olympus FE-360,Canon 20D,Canon
Rebel 350 / XT,Nikon D300,Canon Rebel 400 / XTi,Canon 30D,Canon
5D,Nikon D200,Nikon D40,Nikon D40x,Nikon D60,Olympus
SP-510,Olympus E-500,Canon G9,Nikon P5000,Nikon P5100,Nikon
D80,Nikon D90,Nikon P6000,Nikon D700,Canon 40D,Canon 50D,Canon
G10,Canon 5D Mark II,Canon Rebel 500 / T1i,Canon Rebel 450 / XSi],
Sony : [Sony W300]
};
$.each( items, function(brand){
$(select[name='manufacturer']).append('option value=' +
brand + '' + brand + '/option');
});
$(select[name='manufacturer']).change( function(){
$
});
});
So, that is populating the first. Great. Now, it's a matter of finding the
chosen value and then adding the elements of the array to the select.
A nudge anyone?
This is ugly but works. Any suggestions on how to shorten it?
$(document).ready(function () {
var items = {Aquatech : [Canon 5D Mark II,Nikon D3,Nikon
D3x,Canon 1D,Canon 1Ds,Canon 1Ds Mark II,Canon 1Ds Mark III,Canon
1D Mark III,Canon 30D,Canon EOS 5D,Canon 20D,Nikon D200,Nikon
D700,Canon 40D,Canon 50D,Nikon D300],
Canon : [Canon HF20,Canon SD800,Canon
A570,Canon G10,Canon G11],
Ikelite : [Olympus FE-360,Canon 20D,Canon
Rebel 350 / XT,Nikon D300,Canon Rebel 400 / XTi,Canon 30D,Canon
5D,Nikon D200,Nikon D40,Nikon D40x,Nikon D60,Olympus
SP-510,Olympus E-500,Canon G9,Nikon P5000,Nikon P5100,Nikon
D80,Nikon D90,Nikon P6000,Nikon D700,Canon 40D,Canon 50D,Canon
G10,Canon 5D Mark II,Canon Rebel 500 / T1i,Canon Rebel 450 / XSi],
Sony : [Sony W300]
};
$.each( items, function(brand){
$(select[name='manufacturer']).append('option value=' +
brand + '' + brand + '/option');
});
$(select[name='manufacturer']).change( function(x){
var man = this.value;
$.each( items, function(brand, model){
if(brand==man) {
$(select[name='model']).empty();
$.each(model, function (){
$(select[name='model']).append('option value=' + this + '' + this +
'/option') });
}
});
});
});
Thanks
Steffan
