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?

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>