How could I create a list in a pulldown menu based on the selection made by a user?

Head out to http://brucegust.com/portfolio/calendar/body.php and you'll see what I'm trying to do.

I've got two pulldown menus. When my user makes a selection from the first pulldown menu, it populates the options within the second pulldown menu.

I'm thinking a well-oiled JQuery function would do that.

How?
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

F IgorDeveloperCommented:
See an example at https://jsfiddle.net/FranIg/nfts1nsf/1/

Also, you can create array-based options and set the elements using a loop instead of setting them manually one by one.
0
brucegustPHP DeveloperAuthor Commented:
fraigor!

This is exactly what I was looking for!

Question: Head out to http://brucegust.com/portfolio/calendar/body.php and you'll see my attempt to duplicate what you've done. It doesn't work and I'm confident it has something to do with the "onload" dynamic.

What is that? Is that an issue and how do I fix it?

Thanks!
0
F IgorDeveloperCommented:
Yes, you need to put the jquery code in an onload event. Also you could put your code in a named function (eg: function load(){ ....} ) and call it using <body onload="load()" >

<script>
$( document ).ready(function() {

$("#src").on("change", function(ev){
   $("#tgt").find('option').remove();
   $("#tgt").append("<option ></option>");
   if ($(this).val()=="CATN"){
    	$("#tgt").append("<option>North Carolina</option>");
		$("#tgt").append("<option>South Carolina</option>");
		$("#tgt").append("<option>Tennessee</option>");
   }
   if ($(this).val()=="GAAL"){
    	$("#tgt").append("<option>Georgia</option>");
		$("#tgt").append("<option>Alabama</option>");
   }
});

});

</script>

Open in new window


Also an improved solution is using arrays instead of writing each option:  https://jsfiddle.net/FranIg/nfts1nsf/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brucegustPHP DeveloperAuthor Commented:
Perfect!

Thanks so much!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.