I have noticed that when I select a table row , getting the id, popping a div with a form all of my fields are being populated with the correct values except the 'subcategory_id' element (select). The data is there in the control but it is not selecting. and I am not sure why. If I had to guess it would be because the values in the control were added via jquery but are not visible in the source. How do I resolve this.

I am selecting a table row link and getting a json array returned:

{"id":"1844","title":"Test 2","keywords":"james, aaron, purple, orange","media_id":"1","category_id":"17","subcategory_id":"28","description":"This is some test data"}
and callback to:

Code:
function editCatalogue(id) {       
		   var dataString = 'id='+id;        
			$.get('catalogue_read.php', 
			  dataString,
			  function(returnData) {
				data = jQuery.parseJSON(returnData);
				catid = data['category_id'];            
				getSubcategory(catid);   
				showDialog();       
				$.each(data, function(key , value) {              
					$("#"+key.toString()).val(value); 
				});          
			});          
		};
Some of the subcategory values returned from php:

<option>Please Select</option><option value="33">Access Floors</option><option value="34">Balustrades</option><option value="29">Doors: general</option><option value="28">Doors: industrial</option><option value="30">Doors: parts, accessories</option><option value="25">External & entrance screens</option><option value="31">Lintels, sills, weather bars, other</option><option value="36">Rooflights</option><option value="32">Room dividers, internal grilles etc.</option>
Subcategory values passed to the html control:

Code:
	function getSubcategory(id) {
        var dataString = 'catid='+id;
        $.ajax ({
          type: "POST",
          url: "php/subcategory_by_categoryid.php",
          data: dataString,
          cache: false,
          success: function(data) {
             $('#subcategory_id').html(data)
          }
        }); 
      }