如何通过表单操作传递下一页中的js变量

Here i am wrote one ochnage function that function working fine ,now questions var city_id i want pass the home.php,how can do this? in home.php page i want city id and city name

$('.options').on('change', function() {
     var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id');
         alert(city_id);
        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form method="POST" action="home.php">
<input list="options" type="name" class="form-control options" style="border-radius:0px;height: 36px;" name="location12" id="location12" placeholder="City" >
    <datalist id="options">
    <option data-id="1" value="Bangalore"></option>
    <option data-id="2" value="Chennai"></option>
    <option data-id="3" value="Karur"></option>
</datalist>
<input type="submit" value="submit">
</form>

</div>

You can try to add hidden input filed and set the city_id to it and pass with the form

$('.options').on('change', function() {
     var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id');
        $('#city_id').val(city_id);
        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form method="POST" action="home.php">
<input list="options" type="name" class="form-control options" style="border-radius:0px;height: 36px;" name="location12" id="location12" placeholder="City" >
    <datalist id="options">
    <option data-id="1" value="Bangalore"></option>
    <option data-id="2" value="Chennai"></option>
    <option data-id="3" value="Karur"></option>
</datalist>
<input type="hidden" name="city_id" id="city_id">
<input type="submit" value="submit">
</form>

</div>

You can pass this in query string like:

$('.options').on('change', function() {
     var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id');

var url = 'home.php?city=' + city_id;
window.location.href = url;
// This will redirect user to **home.php** with selected city.
});

On home.php you can get this value using:

$_GET['city'];

Try it...

Javascript

 $('.options').on('change', function() {
         var city_id = $('#options option[value="' + $('#location12').val() + '"]').data('id');
             $("#form").attr('action','home.php?city_id='+city_id);
             $("#submit").click();

    });

Html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form method="POST" action="" id="form">
<input list="options" type="name" class="form-control options" style="border-radius:0px;height: 36px;" name="location12" id="location12" placeholder="City" >
    <datalist id="options">
    <option data-id="1" value="1">Bangalore</option>
    <option data-id="2" value="2">Chennai</option>
    <option data-id="3" value="3">Karur</option>
</datalist>
<input type="submit" value="submit" id="submit">
</form>