jQuery, AJAX, Struts - Add a Select Box Option

Here is a quick little example on how to add a new option to a select box and make the new value the selected value.

On my JSP page I have two select boxes that can have new values added. When a new value for an Award or Project is add, the new value will be added as an option to the select box and made the selected value.

A modal dialog box is used to enter a new Award or Project. In this image, you can see a section of the dialog box for adding a new Award. In the dark area you will see a section of the original record edit screen.

Here is the section from the JSP page for the select box. Since the forms are generated dynamically, the id of my select box can have any value so I need to return that value to the server so that it can be used later on as the AJAX target. In the code snippet below you see this value being returned as the "target" parameter.

<s:select name="tableRecord.tblRecord.%{fieldName}" id="disp%{fieldName}" list="selectListMap(fkeyName)" headerKey="" headerValue="Please Select"/>
<s:if test="fkeyPrimaryTableName != null">
 <s:url var="urlFkey" namespace="%{namespace}" action="GotoAddForeignKeyRecord" escapeAmp="false">
  <s:param name="target" >disp${fieldName}</s:param>
  <s:param name="fkeyName" value="fkeyName"/>
  <s:param name="fkeyTableName" value="fkeyPrimaryTableName"/>
 </s:url>
 <s:a href="%{urlFkey}" cssClass='ajax'>
  Add New <s:property value="fkeyPrimaryTableNameLabel"/>
 </s:a>
 <script type="text/javascript">
 $(".ajax").colorbox({width:'800', close:'close'});
 </script>
</s:if>

I use XML files to define the fields for the database tables. Here is the section from the XML file that describes the awardID.

<FieldDescriptor>
    <fieldName>awardID</fieldName>
    <fieldLabel>Award</fieldLabel>
    <fieldType>1</fieldType>
    <fieldSize>0</fieldSize>
    <editable>true</editable>
    <listable>true</listable>
    <required>true</required>    
    <fkeyName>lstAwards</fkeyName>
    <fkeyPrimaryTableName>Award</fkeyPrimaryTableName>
    <fkeyPrimaryTableNameLabel>Award</fkeyPrimaryTableNameLabel>
    <fkeyListEditable>true</fkeyListEditable>
</FieldDescriptor>   

Don't get hung up on this XML structure or the information it contains. The import part follows, getting the new value into the select box.

Here is my GotoAddForeignKeyRecord action method. Notice that the target for my AJAX action is being saved as ajaxTarget.

public String gotoAddForeignKeyRecord(){
 String fkeyName = request.getParameter("fkeyName");
 //save the target for the AJAX action
 this.ajaxTarget = request.getParameter("target");
 this.baseTableDescriptor = TableDescriptorFactory.getFieldDescriptor(table); 
 for(KeyDescriptor kD: this.baseTableDescriptor.getLstKeyDescriptor()){
  if(kD.getName().equals(fkeyName)){
   String tMapper = kD.getMapper();
   if(kD.getTableMapper() != null) {
    tMapper = kD.getTableMapper();
   }
                        //luTableField is used for the display value in the select box on the JSP page
   this.luTableField = kD.getLuTableField();
   //set the Struts namespace for the table we are targeting
   this.redirectNamespace = "/" + tMapper.replace("Mapper", "").toLowerCase();
   //set the page that we will be redirecting to
   this.redirectPage = "AddForeignKeyRecord";
   this.recordID = null;
   return SUCCESS;
  }
 }
 return ERROR;
}

The section from the record add JSP page with the jQuery code for populating the select box. The values that I need for the key and value I get from the "${tablename}ID" and "disp${luTableField}" on the JSP page.

<s:url id="urlCancelRecordAdd" namespace="%{namespace}" action="NoOpp"/>
<sj:submit  value="Cancel" formIds="saveRecordFK" id="cancelFKRecordEdit" href="%{urlCancelRecordEdit}" onclick="parent.$.colorbox.close();return false;" button="true" style="font-size: .7em;"/>
</td>
</tr>
<script type="text/javascript">
//submit the list
$('#cancelFKRecordAdd').click(function() {
 //if we have an ID then we have a record so update the sellect box
 if($('#${tablename}ID').val() != ''){
        //make the markup for the option for the select box
 var option = '<option value=' + $('#${tablename}ID').val() + '>' + $('#disp${luTableField}').val() + '</option>';
        //add the option to the select box
 $('#${ajaxTarget}').append(option);
        //set the added option as the selected value
 $("#${ajaxTarget}").val($('#${tablename}ID').val());
 }
});
</script>