Struts2 jquery grid with double select box

Question

I have used truts2 jQuery grid plugin with DropDown select box in my web application. That work's pretty good.

Here's the codes i have tried so far:

@Action(value="selectcountries", results= { 
    @Result(name="success", type="dispatcher", location="ImportedJspFiles/countrys_select.jsp") 
})

public String selectCountries() {
    this.selectCountriesList = provinceController.selectAllCountries();
    return SUCCESS;
}

countrys_select.jsp:

<%@ taglib prefix="s" uri="/struts-tags"%>

<s:select list="selectCountriesList" theme="simple" listKey="countryId" 
    listValue="countryName" />

grid coloum:

<sjg:gridColumn name="countryName"
    index="countryName"
    title="Country"
    sortable="true"
    search="true"
    surl="%{selectcountries}"
    searchoptions="{sopt:['eq','ne','bw','cn'], dataUrl : '%{selectcountries}'}"
    searchtype="select"
    editable="true"
    edittype="select"
    editoptions="{ dataUrl : '%{selectcountries}' }"
    formoptions="{label:'Select a Country'}" />

And I would like to implement double select type in grid columns. But how can I implement double select type in struts2 jquery grid view?

1. select city
2. select areas in that city

When we select a particular city I want to load areas of that city in area select box.

Please share with me, if any one had a solution about the same.