Laravel& Ajax，Jquery-文本框的选择下拉列表的输入值 [英] Laravel & Ajax, Jquery - Input value of select dropdown to textbox

问题描述

如何获得此输出?

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

I want a dynamic dropdown like when I select a value on the dropdown then it the textbox should be filled with its connected value automatically

这是我的数据库值示例

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

so for example i choose 123 on the select dropdown then the textbox must be filled with 3 automatically, how can i do that?

这是我的代码，不能正常工作.

here is my code it is not working btw.

查看

       <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

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(){

            }
        });



    });
});

推荐答案

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

You're targeting the wrong element in the jquery. If you want to change the value of the textbox when the select dropdown is changed then you need to target the select. Change the target element from .aircraft_id to .aircraftsName on this line $(document).on('change', '.aircraftsName', function() {.

此外，您无需致电控制器.您可以将aircraft_id作为值添加到选择下拉列表中.将选择下拉列表的创建方式更新为如下所示:

Also, you don't need to make a call to the controller. You could put the aircraft_id as the value in the select dropdown. Updating the way the select dropdown is created to something like this might work:

<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可能会像这样简单:

Then your jquery could be as simple as this:

$(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调用，我对代码进行了一些更新:

If you want to use an ajax call I've updated the code a little:

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

This might get you closer. Since it's a get request you could append the id to the url and not use the data parameter: url: '/admin/settings/findAirName?id=' + air_id;, but don't include the line data: {id: air_id}.

这篇关于Laravel& Ajax，Jquery-文本框的选择下拉列表的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！