Laravel 和 Ajax，Jquery - 选择下拉列表的输入值到文本框

Question

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

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

这是我的数据库值示例

例如，我在选择下拉列表中选择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 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);
}

网络

    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

您在 jquery 中定位了错误的元素。如果要在更改选择下拉列表时更改文本框的值，则需要定位选择。在此行$(document).on('change', '.aircraftsName', function() { 上将目标元素从.aircraft_id 更改为.aircraftsName。

此外，您无需调用控制器。您可以将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 请求，因此您可以将 id 附加到 url，而不使用数据参数：url: '/admin/settings/findAirName?id=' + air_id;，但不要包含 data: {id: air_id} 行。

Answer 2

你可以这样做：

查看

<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 );
  });
});

我在select 和input 元素上添加了id