dashboard change from dropdown to unordered list ui

[Punit]

I have a dashboard with dropdown select for country and city. After that a multi-select for zone. When all the options are selected the graphs are displayed in the dashboard accordingly. Now I want the select options to appear in left pane as list and all the graphs on the right pane. On the left pane it should be something like:
*Country:
*US
*Canada
*India
*China

i.e displaying all the countries. Then when the user clicks on on of the country the list should change displaying all the cities in that country like :
*US
*Canada
*Ottawa
*Vancouver
*Calgery
*India
*China

And when we click of one of the cities it should display all zones where we can perform multiple selections like:

*US
*Canada
*Ottawa
[] Zone A
[] Zone B
[] Zone C
............
*Vancouver
* Calgery
*India
*China
And when the zones are selected we display the graph accordingly. To move the selection to left and graph to right, I have created wrapper div's and added my own css to float them to left. Now the select are on the left and graphs on right. But the selects are in dropdown and multi-select format of splunk.. and I want to change it to the format discribed above. So far, I have seen searchManager to query, but on the search:done i want to fill it in an unordered list and not the dropdown. Kindly suggest how to proceed.

[marco_sulla]

You can create an empty html tag and fill it with an html element created by javascript. The data will be populated by the searchmanager. You have also to bind events to the elements and change the tokens accordingly, as Splunk does for their own elements. You can find a basic example here:
http://dev.splunk.com/view/webframework-splunkjsstack/SP-CAAAERK