How to pass value in form action?

The site has a simple form with a dropdown list and a submit button.
Task: to make so that when you select a particular item from the drop-down list, click on the button tossed on the page.
I found this solution:

<script type="text/javascript">
 function myfunc() {
 var url = data.id.value;
 window.location.href = url;
return(false);
}
</script>

<form action="#" class="sky-form clearfix" onsubmit="javascript:return(myfunc());">
 <div class="col col-3">
 <label class="label">Direction (country)</label>
 <label class="select">
 <select name="id">
 <option>Select country</option>
 <option value="thailand.html">Thailand</option>
 <option value="india.html">India</option>
 <option value="index/catalog/spain.html">Spain</option>
 <option value="index/catalog/italy.html">Italy</option>
</select>
<i></i>
</label>
</div>

 <div class="col col-3">
 <button type="submit" class="btn-u btn-u-lg btn-u-upper">Show suggestions</button>
</div>
 </form>

but it works not as it should: instead of domain.com/index/catalog/spain.html passed domain.com?id=index%2Fcatalog%2Fspain.html#
Tell me, can this be fixed and is there a solution without using js