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

Question

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>

Answer 1

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>