问题描述
我有一个名为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>
在这里控制器..
Class CountryController扩展了Controller {
public function index()
{
$countries=Country::all();
return view('country',compact('countries'));
}
}
我的预期输出将是：
名字：伊斯坦布尔
解决方法
要实现此目的，您可以使用JavaScript。
示例：
首先在 select元素上添加 onchange =“ displayCountryName（this.value）” 。
第二，用禁用的输入元素替换p元素，向您的输入元素添加一个ID，就像 id =“ countryName”
REAL针对您的JS
<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>
下面是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;
}