Question

I would like to make select more unobtrusive.

I would like that when user selects particular options jquery automatically sends appropriate request, for instance /conroller/action/1

<form id="some-id" method="post" data-remote="true" action="/templates?locale=uk" >
<select id="user-templates" data-remote="true" name="user-templates">
   <option href="/controller/action/1" data-remote="true" value="1">option-1</option>
   <option href="/controller/action/2" data-remote="true" value="2">option-2</option>
   <option href="/controller/action/3" data-remote="true" value="3">option-3</option>
   <option href="/controller/action/4" data-remote="true" value="4">option-4</option>
</select>
</form>

But instead currently it sends strange request like http://127.0.0.1:3000/templates?locale=uk&some-id=1 according to selected option.

Thanks a lot.

Answer 1

There is no href attribute for option tag. Your options is:

Method 1.

<option onclick="location.href = '/controller/action/1'" 
  data-remote="true" value="1">option-1</option>

Method 2. JavaScript:

$("#user-templates").change(function() {
  location.href = "/controller/action/" + $("#user-templates").val();
});

Or, if you want to send request in background:

$("#user-templates").change(function() {
  $.get("/controller/action/" + $("#user-templates").val());
});