Laravel & Ajax, Jquery - введите значение выпадающего списка в текстовое поле

Question

Как мне достичь этого результата?

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

вот мой пример значения базы данных

так, например, я выбираю 123 в выпадающем списке, тогда текстовое поле должно быть заполнено 3 автоматически, как я могу это сделать?

вот мой код, кстати, он не работает.

View

       <span>Aircraft Name</span>
            <select name="aircraft_name" class="aircraftsName">
              <option value="0" disabled="true" selected="true"> Select </option>
              @foreach ($aircrafts as $aircraft)
                  <option value="{{ $aircraft->aircraft_registration_number }}">{{ $aircraft->aircraft_registration_number }}</option>
              @endforeach

            </select>

            <span>Aircraft ID</span>
            <input type="text" class="aircraft_id">

Контроллер

  public function findPrice(Request $request){


    $p=Product::select('aircrafts')->where('registred_company_name',$request->aircraft_id)->first();

    return response()->json($p);
}

Web

    Route::get('/admin/settings/findAirName','Admin\SettingsController@findAirName');

Ajax & Javascript

<script type="text/javascript">
$(document).ready(function(){
    $(document).on('change','.aircraft_id',function(){
        var air_id =  $(this).val();

        var a = $(this).parent();

        console.log("Its Change !");

        var op = "";

        $.ajax({
            type:'get',
            url:'{!!URL::to('/admin/settings/findAirName')!!}',
            data:{'id':air_id},
            dataType:'json',//return data will be json
            success:function(data){
                // console.log("price");
                console.log(data.registred_company_name);


                 a.find('.aircraft_id').val(data.registred_company_name);

            },
            error:function(){

            }
        });



    });
});

Answer 1

вы можете сделать это так:

VIEW

<span>Aircraft Name</span>
<select id="aircraft_name" name="aircraft_name" class="aircraftsName">
    <option value="0" disabled="true" selected="true"> Select </option>
    @foreach ($aircrafts as $aircraft)
       <option value="{{ $aircraft->id}}">{{ $aircraft->aircraft_registration_number }}</option>
    @endforeach
</select>

<span>Aircraft ID</span>
<input id="aircraft_id" type="text" class="aircraft_id">

//JS
$(document).ready(function(){
  $("#aircraft_name").change(function(){
    var air_id =  $(this).val();
    $("#aircraft_id").val(air_id );
  });
});

Я добавил id в элемент * select и input

Answer 2

Вы нацелены не на тот элемент в jquery. Если вы хотите изменить значение текстового поля при изменении выпадающего списка, вам нужно настроить таргетинг на этот выбор. Измените целевой элемент с .aircraft_id на .aircraftsName в этой строке $(document).on('change', '.aircraftsName', function() {.

Кроме того, вам не нужно звонить на контроллер. Вы можете поместить aircraft_id в качестве значения в выпадающем списке. Обновление способа создания выпадающего списка для чего-то подобного может работать:

<select name="aircraft_name" class="aircraftsName">
    <option value="0" disabled="true" selected="true"> Select </option>
    @foreach ($aircrafts as $aircraft)
       <option value="{{ $aircraft->aircraft_id }}">{{ $aircraft->aircraft_registration_number }}</option>
    @endforeach
</select>

Тогда ваш jquery может быть таким простым:

$(document).ready(function() {
    $(document).on('change', '.aircraftsName', function() {
        var air_id =  $('.aircraftsName').val();     // get id the value from the select
        $('.aircraft_id').val(air_id);   // set the textbox value

        // if you want the selected text instead of the value
        // var air_text = $('.aircraftsName option:selected').text(); 
    });
});

Если вы хотите использовать ajax-вызов, я немного обновил код:

$(document).ready(function() {
    $(document).on('change', '.aircraftsName', function() {
        var air_id =  $(this).val();

        var a = $(this).parent();

        console.log("Its Change !");

        var op = "";

        $.ajax({
            type: 'get',
            url: '/admin/settings/findAirName',
            data: { 'id': air_id },
            dataType: 'json',      //return data will be json
            success: function(data) {
                // console.log("price");
                console.log(data.registred_company_name);

                a.find('.aircraft_id').val(data.aircraft_id); 
                // do you want to display id or registration name?
            },
            error:function(){

            }
        });
    });
});

Это может приблизить вас. Поскольку это запрос get, вы можете добавить идентификатор к URL и не использовать параметр данных: url: '/admin/settings/findAirName?id=' + air_id;, но не включать строку data: {id: air_id}.