jQuery SELECT does not show selected option

Scenario: You have a drop down box or list box in your jQuery jqGrid plugin and you edit the row via the form edit modal dialog but the form fails to show your selected option(s) in the drop down or list box.

The reason: The jqGrid SELECT element binds the selected option(s) innerHTML (not the value) with the name value in the colModel.
Example:

In the JavaScript file I have a function that I call to setup the grid:

function jqGridAccountContact(item, listURL, editURL, $rows, hideGrid) {
//get all DMRoles for the drop down box from the server as key-value pairs
var allDMRoles = $.ajax({ url: $('#ajaxAllDMRolesUrl').val(), async: false, success: function(data, result) { if (!result) alert('Failure to retrieve the DM Roles.'); } }).responseText;

$(item)
.jqGrid({
url: listURL,
datatype: "json",
colNames: ['Id', 'First Name', 'Last Name', 'DM Role'],
colModel: [
{ name: 'Id', index: 'Id', width: 35, sortable: true, align: "center", resizable: false, hidden: false, editable: false, editoptions: { readonly: true, size: 0} },
{ name: 'FirstName', index: 'FirstName', width: 40, editable: true, sortable: true, align: "left", resizable: true, hidden: true, editrules: { edithidden: true, required: true} },
{ name: 'LastName', index: 'LastName', width: 40, editable: true, sortable: true, align: "left", resizable: true, hidden: true, editrules: { edithidden: true} },
{ name: 'DMRole', index: 'DMRole', width: 30, editable: true, sortable: false, align: "center", resizable: false, edittype: "select", hidden: true, editoptions: { value: allDMRoles }, editrules: { edithidden: true, required: true} },
],

The key-value pair retrieved from the server for allDMRoles looks like this:

1:Final DM;2:Influencer;3:Blocker;4:DM Agent

jqGrid generates a SELECT element that looks like this:

Final DM
Influencer
Blocker
DM Agent

It matches the value in the row of DMRole (in the colModel) with the value from allDMRoles: form example "Final DM" and not the value "1".