JQuery URL Selector to Replace standard XHTML Form Dropdown

Question

I'm certain this is a simple solution, but had no luck pinning down the right approach (just getting started with jQuery). So, here's the question:

I have this HTML form:

<form id="callSelect" class="full" method="post" action="">
  <select name="Single">
    <option value="/var-a/">Var A</option>
    <option value="/var-b/">Var B</option>
    <option value="/var-c/">Var C</option>
    ...
  </select>
  <input type="submit" name="sub" value="sub" />
</form>

And basically want to build the relevant URL based on the selected option value which the user-agent will then be taken to when the sbmit button is clicked.

As a basic form, with parameterd URLs, no problem of course, but the URLs I want are 'clean', of the form: ../category/section/{var}/ (so ../category/section/var-a/ for the first option in the list.

I'm using jQuery elsewhere, and so want to retain this framework for any solution, but as I'm new to the framework (and JS generally) would appreciate any help offered. Simply inserting actual links and restyling as a drop down (which I can do no problem) is not an option unfortunately.

Answer 1

$('select').change(function() {
    $(this).closest('form').attr('action', '../category/section/' + $(this).val() + '/');
})