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上，而不使用data参数： 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