New Post: Add choice field option using SPServices

I did come up with a solution using the references you provided (a hearty thanks to both references), plus this one:

http://devspoint.wordpress.com/2010/10/26/using-spservices-to-get-the-values-of-a-choice-field/

I created a few global variables:

var inputText = "";
var matchText = "";
var arrayList = [];

Created HTML to hold and display my results (simplified for this post):

<table>
   <tr>
      <td style="padding-top: 10px; vertical-align:top">
         <div class="inputBoxButton">
            <input id="inputBox" width="100px" height="15px" ></input>
            <input id="btnSubmit" type="button" value="Add a Choice" height="15px" />
         </div>
      </td>
      <td>&nbsp;</td>
      <td style="padding-top: 10px; vertical-align:top">
         <div id="responseDiv" class="dataview-group-panel">
        <div class="dataview-heading"></div> 
         </div>
      </td>
   </tr> 
</table>

Then, I had to get the current choices from the list. NOTE: I was also checking to see if my new entry already existed in the choice field, hence "iText" (input text) & "mText" (match text is input text with spaces removed):

function loadListInfo(lName, iText, mText) {
      var inputText = iText;
      var matchText = mText;
      $().SPServices({
         operation: "GetList",
         listName: lName,
         async: false,
         completefunc: function(xData, Status) {
            //alert(xData.responseText);
            parseListInfo(xData, Status, inputText, matchText, lName);
         }
      });
} 

A sample call would be:

   inputText = $.trim($("#inputBox").val()); // text box for new option
   matchText = inputText.toLowerCase().replace(/\s/g,''); 
   loadListInfo("My List",inputText,matchText);

With the list's info in hand I then checked the choice field for a match and parsed the current field choices into an array (called in the completefunc from function loadListInfo() above)

function parseListInfo(xData, Status, iText, mText, lname) {
      if(Status == 'success') {
         var inputText = iText;
         var matchText = mText;
         var matchCount = 0;
         $(xData.responseXML).find("Field[DisplayName='<the field you are working with>'] CHOICE").each( function () {
            arrayList.push($(this).text());
            thisText = $(this).text().toLowerCase().replace(/\s/g,'');
            if(thisText == matchText){
               matchCount +=1;
               $(responseDiv).append("<div class='dataview-choice-option'>Match\: Your entry\: <strong>" + inputText + "</strong> / Existing entry\: <strong>" + $(this).text() + "</strong> \(" + lname + ")</div>");
            }
         });
         if(matchCount == 0 && matchText.length == 0){
            $("#responseDiv").empty();
            $("#responseDiv").append("<div class='dataview-choice-option' style='color:red'><strong>You have to enter some text</strong></div>");
         } 
         if(matchCount == 0  && matchText.length > 0 && arrayList.length > 0){
            if (confirm('Add new entry\n' + inputText +'?')) {
                updateChoice(lname, arrayList, inputText); 
            } else {
                 return;
            }
         }
      }
}

Finally, I performed the update -- using the existing choice field entries from the array and added the input text (called from function parseListInfo() above):

function updateChoice(list, array, lName){
      var fieldsToUpdate = '<Fields>';
      fieldsToUpdate += '<Method ID="1"><Field Type="Choice" Name="' + offSym +'" DisplayName="<the field you are working with>">';
      fieldsToUpdate += '<CHOICES>';
      for(i=0;i<array.length;i++){
         fieldsToUpdate += '<CHOICE>' + array[i] + '</CHOICE>';
      }
      fieldsToUpdate += '<CHOICE>' + inputText + '</CHOICE>';
      fieldsToUpdate += '</CHOICES>';
      fieldsToUpdate += '</Field>';
      fieldsToUpdate += '</Method>';
      fieldsToUpdate += '</Fields>';


      $().SPServices({
         operation: "UpdateList",
         listName: list,
         listProperties:"",
         updateFields: fieldsToUpdate,
         newFields: "",
         deleteFields: "",
         listVersion: "",
         async: false,
         completefunc: function (xData, Status){
            if(Status == 'success'){
               $("#responseDiv").append("<div class='dataview-choice-option'>\"" + inputText + "\" added \(" + list + ")</div>");
            }        
         }
      });
}

There were other steps, like attaching click functions, key up functions and steps specific to my SharePoint site that I left out for brevity, but this should work for any other SharePoint novice, like myself, trying to figure out how to add a choice field option with SPServices & jQuery only.