How can I maintain selected value of drop-down list while come back to page

Question

My application i am using two pages, In the first page having "Drop down list items" and "submit button"

if we click on submit button it goes to second page.In the second page having submit button and Cancel button.

if we click Cancel button it come back to first page.

here in second page if we click on "Cancel button" it come back to previous page and maintain the whatever the previous selected value in the drop down list but ajax request is not going. My code:

$(document).ready(function(){                       
   $("#bedroom_view_bedroom").change(function() {          
    var id_select = $('option:selected', this).val();
    $.ajax({
            type: 'POST', 
            url: '{{ (path('studentlistingview', {'id': id})) }}',
            contentType: 'application/x-www-form-urlencoded',
            data: {id:id_select}, 
        success: function(result,status,xhr){
           var tdo = "<td>"; 
           var bedroom_arr = JSON.parse(result);                      
           }
           ,
        error: function(xhr, status, error) {     
                console.log(status);
            } 
        }); 
   });
 });

here my drop-down id is #bedroom_view_bedroom how can i sent ajax request while comeback first page. help me anyone. Thanks in advance...

Edit:

function selectedValue(value){  
var value =$('#bedroom_view_bedroom option:selected').val();  
if(value !==null)  
    {      
   value = document.getElementById("bedroom_view_bedroom").selectedIndex='0';
    }   
    return value;
} 

i create function for default drop down value but how can i call after comeback first page

Answer 1

您只在URL使用了" .... " ：

 url: "{{ (path('studentlistingview', {'id': id})) }}",