如何在 Laravel 8 中显示数据库中的其他值答案

【问题标题】：How to display other value in database in Laravel 8如何在 Laravel 8 中显示数据库中的其他值
【发布时间】：2021-03-18 00:46:47
【问题描述】：

当我选择一个选项时，我从数据库中有一个下拉列表，我想显示与我选择的选项相关的其他数据。我怎样才能做到这一点？ javascript/jquery 能做到吗？如果有，怎么做？

下面是我的代码：

HTML：

<div class="container-fluid">
  <div class="row">
    <h1>Dropdown value from database</h1>
    <br><br><br>
  </div>

  <form action="dropdownfromdb" method="post">
    @csrf
    <div class="row">
      <div class="col">
        <select name="pet">
          <option>Choose Name</option>
          @foreach($memberlist as $member)
            <option value="{{$member->id}}">{{$member->name}}</option>
          @endforeach
        </select><br><br>
      </div>
      <div class="col-10">
        <label>His age is: </label><input type="number" name="age" value="">
      </div>
    </div>
  </form>
</div>

控制器：

public function index()
    {
        $memberlist = Member::select('id','name')->get();
        return view('basic.dropdownfromdb',compact('memberlist'));
    }

【问题讨论】：

是的，您将需要 js，但您首先必须获得 $memberlist 而不仅仅是 id 和 name。如果你想要年龄，然后在 Member::select() 中添加“年龄”
是的，我已经选择了年龄，但是javascript怎么做？
您将 $memberlist 传递给 json 中的 js，然后编写一个在选择下拉列表时触发的事件，该事件读取当前选择的 id 并从 id 中选择成员并将该成员的年龄放入文本框。
谢谢你的想法，但你能告诉我吗？我完全没有 Javascript 方面的经验并正在努力学习

标签： javascript php html jquery laravel

【解决方案1】：

从数据库中获取值'age'并更改控制器如下，

public function index()
    {
        $memberlist = Member::select('id','name', 'age')->get();
        return view('basic.dropdownfromdb',compact('memberlist'));
    }

在事件change 中使用以下命令获取当前选择的选项：

var nowAge = $(this).children(':selected').data('age');

以下代码 sn-p 只是打印选定的值，并使用 $(this).next('input').focus().val(nowAge); 将 nowAge 设置为下一个 input 字段。

使用该值添加以下 jQuery 逻辑。

$(".pet-select").change(function () {
    var nowAge = $(this).children(':selected').data('age');
    console.log(nowAge);
    
    $("#age-value").val(nowAge);  
});

所以你最终的 HTML 代码段应该在下面，

<div class="container-fluid">
  <div class="row">
    <h1>Dropdown value from database</h1>
    <br><br><br>
  </div>

  <form action="dropdownfromdb" method="post">
    @csrf
    <div class="row">
      <div class="col">
        <select class="pet-select" name="pet">
          <option>Choose Name</option>
          @foreach($memberlist as $member)
            <option value="{{$member->id}}" data-age="{{$member->age}}">{{$member->name}}</option>
          @endforeach
        </select><br><br>
      </div>
      <div class="col-10">
        <label>His age is: </label><input type="number" id="age-value" name="age" value="">
      </div>
    </div>
  </form>
</div>

希望它能解决您的问题。

我已经为这个问题创建了一个完整的 HTML 源代码，

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dropdown value from database</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container-fluid">
    <div class="row">
        <h1>Dropdown value from database</h1>
        <br><br><br>
    </div>
    
    <form action="dropdownfromdb" method="post">
        <div class="row">
        <div class="col-sm-4">
            <select class="pet-select" name="pet">
            <option>Choose Name</option>
            <option value="ahmad" data-age="21">Ahmad</option>
            <option value="abu" data-age="27">Abu</option>
            <option value="ali" data-age="21">Ali</option>                        
            </select><br><br>
        </div>
        <div class="col-sm-8">
            <label>His age is: </label><input type="number" id="age-value" name="age" value="">
        </div>
        </div>
    </form>
</div>

<script>
$(document).ready(function(){
    $(".pet-select").change(function () {
    var nowAge = $(this).children(':selected').data('age');
    console.log(nowAge);
    
    $("#age-value").val(nowAge);    
});
})
</script>

</body>
</html>

【讨论】：

谢谢，但仍然没有显示任何年龄输入
我已经编辑了答案。希望现在一切都会好起来...:)
太棒了。通过我对您的答案所做的一些更改，可以解决我的问题。非常感谢！！！

【解决方案2】：

试试这个：

HTML：-

<div class="container-fluid">
     <div class="row">
          <h1>Dropdown value from database</h1>
          <br><br><br>
     </div>
     <div class="row">
          <div class="col">
                <select name="pet" id="pet">
                      <option>Choose Name</option>
                      @foreach($memberlist as $member)
                           <option value="{{$member->id}}">{{$member->name}}</option>
                      @endforeach
                </select><br><br>
         </div>
     <div class="col-10">
    <label>His age is: </label><input type="number" name="age" value="" id="age">
  </div>
</div>

您的脚本：-

<script>
     $(document).ready(function () {
        // get id when pet change
        $("#pet").change(function () {
            var id= $(this).val();
           
            $.ajax({
                method:"get",
                url: url: "{{ route('ajax.request') }}",
                 data: {_token:_token, id:id}, 
                success:function (data) {

                     $('#pet').val(data);
                },
                error:function () {

                }
            })

        });
    });

</script>

您的路线：-

Route::get('ajax/request', [UserController::getAge, 'ajaxRequest'])->name('ajax.request');

您的控制器方法：-

public function getUserAge(Request $request){
    $id = $request->get('id');
    $age = DB::table('your table name')->select('user age column name')->where('user age column name',$id)->first();
    return response->($age->column name);
}

【讨论】：