Select dropdown not going to option url

Question

I have a pop up box on a siteplan image that includes a select dropdown to let people select the apartment that they want. However, I can't get the it to go to the url when it's selected. So need some help please.

Currently when you select Plot 18 from the dropdown options it goes to:

websitename/developments/surrey/knowle-hill-park?sitemap=%2Fplot-18

however it needs to go to:

websitename/developments/surrey/knowle-hill-park/available-homes/plot-18

Can someone help show what i'm doing wrong in the form below:

<form action="{{ category.url }}">
  <div class="form-group">
    <div class="selectwrap">
      <select id="sitemap" class="form-control" name="sitemap" onchange="this.form.submit()">
        <option value="">Select Plot No</option>
          {% for entry in craft.entries.section('availablehomes').relatedTo(category).level(2).order('plotPrice desc') %}
          {% if entry.plotType == 'apartment' %}
          <option value="/{{ entry.slug }}">{{ entry.title }} - {{ entry.floor.label }} - {% if entry.plotAvailability == 'available' %}{{ entry.plotPrice|currency('GBP', true) }}{% else %}{{ entry.plotAvailability.label }}{% endif %}</option>
          {% endif %}
          {% endfor %}
        </select>
      </div>
    </div>
  </form>

Answer 1

What you're currently seeing is the correct URL for a GET form submission.

You'll need to update the onsubmit handler to construct the URL you wish to visit, based on the selected option.

Here's how to do that, using the omnipresent jQuery. You could probably do the same in plain JS, but I have no idea which browsers you're targeting:

(function ($) {
    $('#sitemap').on('change', function (event) {
        var $select = $(this);
        var $form = $select.closest('form');
        var url = '/desired/path/to/development' + $select.val();

        window.location.href = url;
    });
}(jQuery));

Don't forget to remove the current handler from the markup.