如何在 laravel 的同一页面中显示下拉选择的值？答案

【问题标题】：How to show a dropdown selected value in the same page in laravel?如何在 laravel 的同一页面中显示下拉选择的值？
【发布时间】：2021-02-01 10:44:52
【问题描述】：

我有一个名为 country(id,country,capital) 的数据库表。我通过 dropdwon 选择列表重试了国家名称。我希望当我从下拉列表中选择一个选项时，大写名称将显示在相同的视图页面中。这是我的视图页面..

<div class="container">
 <div class="row">
    <div class="col-sm-6">
        <h3>Country name</h3>
         <select class="form-control" name="country_id">
          <option>Select Country</option>
            
          @foreach ($countries as $key => $value)
            <option value="{{ $key }}"> 
                {{ $value->country }} 
            </option>
          @endforeach    
        </select>
    </div>
    <div class="col-sm-6">
       <h3>Capital name</h3>
       <div style="width: 100%;height: 150px;border:3px solid black">
          <p>Capital name:</p>
       </div>
    </div>
  
</div>

这里是控制器..

类 CountryController 扩展控制器 {

public function index()
{
    
    $countries=Country::all();

   return view('country', compact('countries'));
}


}

我的预期输出将是：

首都名称：伊斯坦布尔

【问题讨论】：

你需要用ajax，用js onChange事件来做

标签： laravel drop-down-menu parameter-passing selection data-retrieval

【解决方案1】：

下面是 HTML 代码..

    <div class="container">
 <div class="row">
    <div class="col-sm-6">
        <h3>Country name</h3>
         <select class="form-control" onchange="capitalName(this.value)" name="country_id">
          <option>Select Country</option>
            
          @foreach ($countries as $key => $value)
            <option value="{{ $key }}"> 
                {{ $value->country }} 
            </option>
          @endforeach    
        </select>


    </div>
    <div class="col-sm-6">
       <h3>Capital name</h3>
       <div style="width: 100%;height: 150px;border:3px solid black">
          Capital name: <input disabled id="countryName">
       </div>
    </div>
</div>

这应该是您的 javascript 代码...

function capitalName(cap){
  document.getElementById('countryName').value = cap;
}

here is the working code for referance

【讨论】：

【解决方案2】：

要实现这一点，您可以使用 JavaScript。

例子：

首先在您的选择元素上添加onchange="displayCountryName(this.value)"。

其次，将 p 元素替换为禁用的输入元素，像这样id="countryName"

为您的输入元素添加一个id

   <div class="container">
     <div class="row">
        <div class="col-sm-6">
            <h3>Country name</h3>
             <select class="form-control" onchange="displayCountryName(this.value)" name="country_id">
              <option>Select Country</option>
                
              @foreach ($countries as $key => $value)
                <option value="{{ $key }}"> 
                    {{ $value->country }} 
                </option>
              @endforeach    
            </select>
    
    
        </div>
        <div class="col-sm-6">
           <h3>Capital name</h3>
           <div style="width: 100%;height: 150px;border:3px solid black">
              Capital name: <input disabled id="countryName">
           </div>
        </div>
      
    </div>

为了你的 JS

 function displayCountryName(value)
{
    document.getElementById('countryName').value = value
}

【讨论】：