javascript - Laravel & Jquery - 用选择框填充文本框到另一个字段值

问题描述

我怎样才能实现这个输出？

我想要一个动态下拉列表，例如当我在下拉列表中选择一个值时，文本框应自动填充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>

我当前的输出和问题

标签： javascriptjqueryajaxlaravellaravel-5

解决方案

在你的脚本中

$(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

javascript - Laravel & Jquery - 用选择框填充文本框到另一个字段值

问题描述

解决方案

推荐阅读