Как получить jQuery значение автозаполнения через идентификатор выпадающего списка

Question

Я собираюсь разработать три раскрывающихся списка автозаполнения, используя jQuery ajax для страны и города в моем проекте laravel. Я могу реализовать простые html выпадающие, используя ajax. Но при использовании автозаполнения jQuery он автоматически добавляет поле ввода, в которое помещает значение поверх выбора опций из выпадающего списка.

Проблема заключается в том, что я получаю только значения в виде текстовой строки из поля ввода, где мне нужен идентификатор страны, которая является моей базой данных. Ранее мне удавалось получить этот идентификатор, используя html элемент select, используя атрибут value, но, похоже, нет способа получить этот идентификатор из поля ввода.

Как получить и, кроме того, как использовать автозаполнение для нескольких полей выбора, которые необходимо автоматически изменить, выбирая параметры из любых полей выбора?

html выбрать элементы

<div class="ui-widget">
                <p style="float:right;display:block;font-size:15px;">
                <select id="country" name="sel_countries" required=""><option value="">Select Country</option>
                @foreach ($countries as $country) 
                <option value="{{ $country->id }}">
                {{ $country->name }}
                </option>
            @endforeach
                </select>
                <select id="state" name="sel_states" required=""><option value="">Select State</option></select>
                <select id="city" name="sel_cities" required=""><option value="">Select City</option></select>
                </p></div>

html ajax запрос

       $('#country').change(function(){
        var cid = $(this).val();
        if(cid){
        $.ajax({
           type:"get",
           url:"<?php echo $url; ?>/getStates/"+cid, 
           success:function(res)
           {       
                if(res)
                {
                    $("#state").empty();
                    $("#city").empty();
                    $("#state").append('<option>Select State</option>');
                    $.each(res,function(key,value){
                        $("#state").append('<option value="'+key+'">'+value+'</option>');
                    });
                }
           }

        });
        }
    });
    $('#state').change(function(){
        var sid = $(this).val();
        if(sid){
        $.ajax({
           type:"get",
           url:"<?php echo $url; ?>/getCities/"+sid, 
           success:function(res)
           {       
                if(res)
                {
                    $("#city").empty();
                    $("#city").append('<option>Select City</option>');
                    $.each(res,function(key,value){
                        $("#city").append('<option value="'+key+'">'+value+'</option>');
                    });
                }
           }

        });
        }
    }); 

bootstrap код автозаполнения

$( function() {
    $.widget( "custom.combobox", {
      _create: function() {
        this.wrapper = $( "<span>" )
          .addClass( "custom-combobox" )
          .insertAfter( this.element );
 
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      },
 
      _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
          value = selected.val() ? selected.text() : "";
 
        this.input = $( "<input>" )
          .appendTo( this.wrapper )
          .val( value )
          .attr( "title", "" )
          .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: $.proxy( this, "_source" )
          })
          .tooltip({
            classes: {
              "ui-tooltip": "ui-state-highlight"
            }
          });
 
        this._on( this.input, {
          autocompleteselect: function( event, ui ) {
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
          },
 
          autocompletechange: "_removeIfInvalid"
        });
      },
 
      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false
 
        $( "<a>" )
          .attr( "tabIndex", -1 )
          .attr( "title", "Show All Items" )
          .attr( "height", "" )
          .tooltip()
          .appendTo( this.wrapper )
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: "false"
          })
          .removeClass( "ui-corner-all" )
          .addClass( "custom-combobox-toggle ui-corner-right" )
          .on( "mousedown", function() {
            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
          })
          .on( "click", function() {
            input.trigger( "focus" );
 
            // Close if already visible
            if ( wasOpen ) {
              return;
            }
 
            // Pass empty string as value to search for, displaying all results
            input.autocomplete( "search", "" );
          });
      },
 
      _source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() {
          var text = $( this ).text();
          if ( this.value && ( !request.term || matcher.test(text) ) )
            return {
              label: text,
              value: text,
              option: this
            };
        }) );
      },
 
      _removeIfInvalid: function( event, ui ) {
 
        // Selected an item, nothing to do
        if ( ui.item ) {
          return;
        }
 
        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children( "option" ).each(function() {
          if ( $( this ).text().toLowerCase() === valueLowerCase ) {
            this.selected = valid = true;
            return false;
          }
        });
 
        // Found a match, nothing to do
        if ( valid ) {
          return;
        }
 
        // Remove invalid value
        this.input
          .val( "" )
          .attr( "title", value + " didn't match any item" )
          .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() {
          this.input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        this.input.autocomplete( "instance" ).term = "";
      },
 
      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
    });
 
    $( "#country" ).combobox();
    $( "#toggle" ).on( "click", function() {
      $( "#country" ).toggle();
    });
  } );

.custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }
  .custom-combobox-input {
    margin: 0;
    padding-top: 2px;
    padding-bottom: 5px;
    padding-right: 5px;
  }

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
                <p style="float:right;display:block;font-size:15px;">
                <select id="country" name="sel_countries" required=""><option value="">Select Country</option>
                 
                <option value="1">
                INDIA
                </option>
            <option value="1">
                USA
                </option>
                <option value="1">
                UK
                </option>
                <option value="1">
                AUSTRALIA
                </option>
                <option value="1">
                BRAZIL
                </option>
                </select>
                <select id="state" name="sel_states" required=""><option value="">Select State</option></select>
                <select id="city" name="sel_cities" required=""><option value="">Select City</option></select>
                </p></div></div>