Cannot get Map function to work with dropdowns

[tshad]

I am trying to take a JSON string and create a dropdown with it. What I see all over the place is to use parseJSON with a map function to do this.

I cannot make it work. I keep getting the following error:
*************************************************************
Unhandled exception at line 1409, column 2 in

http://localhost/GAITEnroll/Scripts/jquery-2.1.1.js

0x800a138f - JavaScript runtime error: Unable to get property 'ownerDocument' of undefined or null reference
**************************************************************

This is the JQuery line that the parseJSON is working with (got this from the watch window).

"[{\"Disabled\":false,\"Group\":null,\"Selected\":false,\"Text\":\"Tustin, Orange\",\"Value\":\"7636dc65-5b08-4af8-b3a5-970800c59511\"}]"

I finally got it to work another way where I parsed it first and didn't use the "map" function:

var test3 = $.parseJSON(data);

$(test3).each(function () {
	$('#PersonalDetail_CityCountyDisplay').append($('<option>').val(this.Value).text(this.Text));
});

Using test3 where I already did the parseJSON on it, does not work with the map fuction:

$(test3).map(function () {
	return $('<option>').val(this.Value).text(this.Text);
}).appendTo('#PersonalDetail_CityCountyDisplay');

And using the parseJSON as part of the statement does not work:

$($.parseJSON(data)).map(function () {
	return $('<option>').val(this.Value).text(this.Text);
}).appendTo('#PersonalDetail_CityCountyDisplay');

Anyone know what is causing the error?

Thanks,

Tom

 

[jpadie]

$.fn.addOption = function(optText, optValue){
    var option = new Option(optText, optValue);
    return this.append(option);
}

var test3 = $.parseJSON(data);

$.each(test3, function(i,e){
 $('#PersonalDetail_CityCountyDisplay').addOption(e.Text, e.Value);
});

 

[tshad]

That is another good option.

But I am trying to find out why the "map" function wasn't working.

Actually, the mapping seemed to work.

It was the ".appendTo" that gave me the error.

I already had it working the other way but am trying to find out why the map example doesn't seem to work. This was the way that many on the net suggested to do it.

Thanks,

Tom

 

[jpadie]

well, for much the same reason.

the syntax is not right

$.map(test3, function(val, i){
 $('#PersonalDetail_CityCountyDisplay').addOption(val.Text, val.Value);
}

or without extending the prototype

$.map(test3, function(val, i){
 $('<option/>').attr('value',val.value).text(val.Text).appendTo('#PersonalDetail_CityCountyDisplay')
}