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 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
Thanks
Steffan
