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
