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