Dependent dropdowns with select2 and ajax returning "Undefined"

Hello,

I have been trying to get some dependent dropdowns to work with select2 (http://ivaynberg.github.io/select2/) and ajax, however I don't think I have it nailed it (well I know I haven't).  

When I select the value from the first dropdown then the second dropdown loads OK, however, once I select the value from the second dropdown, then it shows as "undefined".  

I have created a quick demo which (funnily enough) demonstrates what I am doing as well as the behaviour that occurs.  To repro:

1) Unzip the attached zip into your www folder
2) Go to http://<server-root>/select2
3) Pick a country from the first dropdown
4) Pick a state from the second dropdown

Should then see "undefined" in the second dropdown.

If someone could help me out with this / point me in the correct direction that would be super awesome and much appreciated :)

Michael
select2.zip
LVL 5
MichaelT_Asked:
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.

Chris StanyonWebDevCommented:
You'll probably get more help with this if you create the demo online and then give us a link to it.

I, for one, am not downloading and installing an unknown script on my server!!
0
MichaelT_Author Commented:
Chris,

I usually use a throw-away linux VM for this type of thing so didn't really think about it, but you have a fair point ;)  

You can find it online at mtdemo.com/select2

Thanks in advance :)

Michael
0
Chris StanyonWebDevCommented:
Thanks Michael,

There are a few things in your code that don't really make a lot of sense. You seem to be only calling the select2() function on the State dropdown when you click it. Can't really see why.

You are also trying to dynamically build the AJAX url to pass some info in the queryString, but the correct place for this is in the data argument.

The reason you're getting undefined is because in the initSelection function, you are trying to set the dropdown text to the value of a 'data-display' attribute, but that doesn't exist.

Here's a version of your code cleaned up and working.

$(document).ready(function() {

$("#country").select2({
	minimumInputLength: 0,
	ajax: {
		url: "data.php",
		dataType: 'json',
		data: function (term) {
			return {
				action: 'country',
				query: term
			};
		},
		results: function (data) {
			return { results: data };
		}
	}				
});


$("#state").select2({
	minimumInputLength: 0,
	ajax: {
		url: "data.php",
		dataType: 'json',
		data: function (term) {
			return {
				action: 'state',
				country_id: $('#country').val(),
				query: term
			};
		},
		results: function (data) {
			return { results: data };
		}
	}								
});	

});

Open in new window

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
MichaelT_Author Commented:
Hi Chris,

Yes it was a little muddled as I was trying a few different things.  The reason I was calling the select2 function onclick for the state was because I couldn't get the country value passed in otherwise.  However, you're solution works perfectly, makes perfect sense and is very clear.  I have just added a third dropdown into the mix and everything is chained together nicely.

Thanks again for your help, I really appreciate it :)
0
Chris StanyonWebDevCommented:
Glad I could help ;)
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.