Laravel和Jquery-使用选择框填充文本框到其他字段值

Question

如何获得此输出？

我想要一个动态下拉菜单，例如当我在下拉菜单中选择一个值时，该文本框应在下表中自动填充其连接的值aircraft_id

这是我的数据库值示例

例如，我在选择下拉列表中选择123，然后文本框必须自动填充3，我该怎么做？

这是我的代码，代码正在运行，但是它只能获得与表中另一个值相同的值。

查看

 <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 id="aircraft_id" type="text" class="aircraft_id">
                <br>

JavaScript和Jquery

    <script type="text/javascript">
  $(document).ready(function() {
    $(document).on('change', '.aircraftsName', function() {
        var air_id =  $(this).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(); 
    });
});
</script>

我当前的输出和问题

Answer 1

在您的脚本中

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

您在执行上面的代码吗？ $(this).val()

的值是多少

<option value="{{ $aircraft->aircraft_registration_number }}" >

您正在分配 aircraft_registration_number ，因此您需要像下面这样进行更改

<option value="{{ $aircraft->aircraft_id }}" >

即使您有1000条记录

您可以简单地使用数组

@foreach ($aircrafts as $aircraft)
  <option value="{{ $aircraft->aircraft_id }}" >{{ $aircraft->aircraft_registration_number }}</option>
@endforeach

或您需要更改您的 $ aircrafts 数组

$aircrafts = [
           '1' => 'Sample',
           '4' => 'Boieng',
           '3' => '123'
        ];

然后更改您的for-each

@foreach ($aircrafts as $id => $aircraft)
      <option value="{{ $id }}" >{{ $aircraft }}</option>
@endforeach