Converting a select form to a dropdown buttons

UPDATE: I'm almost there! See my partial answer at the end of this question.

I've got a working form with two select dropdowns, the first for countries, the second for cities. When you select a country, an ajax request automagically gets the countries and updates the countries box.

The problem is the select dropdowns are ugly, and I can't really style them. What I want is a dropdown button, which I can use Bootstrap on to make pretty: Bootstrap Button

I don't have to change the jquery or controller logic, I just have to update my view. But I don't even know where to start. This is what I have:

<%= form_for :trip, url: {action: "index"}, html: {method: "get"} do |f| %>
  <%= f.select :country_obj_id, options_for_select(@countries.collect { |country|
    [country.name.titleize, country.id] }, @countries.first.name), {}, { id: 'countries_select' } %>
  <%= f.select :city_obj_id, options_for_select(@cities.collect { |city|
    [city.name.titleize, city.id] }, 0), {}, { id: 'cities_select' } %>
  <%= f.submit "Go!" %>
<% end %>

How can I convert the selects into dropdown buttons?

UPDATE: I can now get a response back. I just don't know how to handle it to update the button.

The view has two dropdown buttons. The first is the countries, the second is the cities for the first country. I want to update the list of cities for the country that is selected:

<div class="dropdown" style="display:inline-block;">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select A Country
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
      <% @countries.each do |country| %>
        <%= content_tag(:li, link_to(country.name.titleize, update_cities_path(country_obj_id: country.id), remote: :true)) %>
      <% end %>
  </ul>
</div>
<div class="dropdown" style="display:inline-block;">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select A City
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
      <% @cities.each do |city| %>
        <%= content_tag(:li, city.name.titleize) %>
      <% end %>
  </ul>
</div>

Selecting a country goes into the update_cities function, which gets the cities for the country_obj_id that is passed.

def update_cities
  @cities = CityObj.where("country_obj_id = ?", 
                           params[:country_obj_id]).order(:name)
  respond_to do |format|
    format.js
  end
end

Then the part that i don't understand. The format.js takes me to update_cities.js.coffee, which I have not changed from my original version that worked on the select dropdown:

$("#cities_select").empty()
  .append("<%= escape_javascript(render(:partial => @cities)) %>")

That ends up updating my old select dropdown, which I left in the view for now. But how can I modify the js to update my new dropdown button?