Laravel save option text in php - php

Question

I have this code select state -> show state cities :
<div class="form-group">
{{ Form::label('state', 'State') }}
<select name="state" id="state" class="form-control">
<option value="">{{ __('Select Province') }}</option>
#foreach ($state->data as $info)
<option value="{{$info->province_id}}">{{$info->province}}</option>
#endforeach
</select>
</div>
<div class="form-group">
{{ Form::label('city', 'City') }}
<select class="form-control" name="city" id="city">
<option value="">{{ __('Select City') }}</option>
</select>
</div>
and this javascript:
<!-- find cities -->
<script type="text/javascript">
$(document).ready(function() {
$('select[name="state"]').on('change', function() {
var provinceID = $(this).val();
if(provinceID) {
$.ajax({
url: '{{ url('admin/getcitylistshipping') }}/'+encodeURI(provinceID),
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="city"]').empty().append("<option value='' selected>Select</option>");
$.each(data.data, function(key, value) {
$('select[name="city"]').append('<option value="'+ value['city_name'] +'">'+ value['type'] + ' - ' + value['city_name'] +'</option>');
});
}
});
}else{
$('select[name="city"]').empty().append("<option value='' selected>Select</option>");
}
});
});
</script>
What I want is to save options text in my database instead of their
value (which is ID).
what I did
As my cities list comes by json and nothing depended on them I changed my values in my script from value="'+ value['city_id'] + to value="'+ value['city_name'] + and I get my city names instead of their id's.
But my issue is with my states (provinces) part, in that part I need to have state id as value in order to return city names but i don't want to save that id in my database, what i want is to save option name.
Here is my store method:
$this->validate($request, array(
'state' => 'nullable',
));
$shipping->state = $request->input('state');
how can I save my selected state text instead of their id in my
controller?
ideas?

Answer 1

SOLVED
I added extra hidden input to my blade and changed my script to:
html
<div name="statehidden" id="statehidden"></div>
script
<script type="text/javascript">
$(document).ready(function() {
$('select[name="state"]').on('change', function() {
var provinceID = $(this).val();
var statename = $("select[name='state'] option:selected").text(); //add this
if(provinceID) {
$.ajax({
url: '{{ url('admin/getcitylistshipping') }}/'+encodeURI(provinceID),
type: "GET",
dataType: "json",
success:function(data) {
$('#statehidden').empty(); //add this
$('#statehidden').append("<input type='text' name='statehidden' id='statehidden' value='"+statename+"'>"); //add this
$('select[name="city"]').empty().append("<option value='' selected>Select</option>");
$.each(data.data, function(key, value) {
$('select[name="city"]').append('<option value="'+ value['city_name'] +'">'+ value['type'] + ' - ' + value['city_name'] +'</option>');
});
}
});
}else{
$('#statehidden').empty(); //add this
$('select[name="city"]').empty().append("<option value='' selected>Select</option>");
}
});
});
</script>