render a different view on jquery post

i'm new to development so please be patient if i ask a ridiculous question...

i'm trying to post id to my action result on drop down value changed using $.post which works fine but it returns to the same view, but i want it to render a different view

here is my jquery code its in home/index

 $('#select-supplier').change(function (e) {
                var atrVal = $(this).val();
                if (atrVal != '') {

                    $.post('<%=Url.Action("SupplierSelect","Supplier")%>', { id: atrVal });


                    // alert('value changed ' + atrVal);
                } else { alert('please  select a value'); }


            });

here is my controller side(SupplierController)

 public class SupplierController : Controller
    {               
        public ActionResult SupplierSelect(int id)
        {
            //some code
            return View();
        }

    }

instead of rendering the SupplierSelect view it comes back to the home/index from where it was called

tnx in advance

$.post sends a (HTTP POST) request to the server and the response is returned to the post method, not to the browser. It sounds like what you want is to redirect to another page from javascript. So instead of the post, you need to do a redirect which is done like this:

window.location = '<%= Url.Action(...)';

I don't see where you're taking any action on the success of the $.post() call. Ideally, you would be populating some other element on the page with the returned html.

like

$.post('<%=Url.Action("SupplierSelect","Supplier")%>', { id: atrVal }, function(data) {
  $('#supplier_div').html(data);
});

if it's supposed to go to a completely different page, then you just want to submit the form and not use AJAX maybe??