[英]Laravel & Ajax, Jquery - Input value of select dropdown to textbox
How can I achieve this output? 如何获得此输出?
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 我想要一个动态下拉菜单,例如当我在下拉菜单中选择一个值时,则文本框应自动使用其连接的值填充
here is my database value example 这是我的数据库值示例
so for example i choose 123
on the select dropdown then the textbox must be filled with 3
automatically, how can i do that? 因此,例如,我在选择下拉列表中选择
123
,然后文本框必须自动填充3
,该怎么办?
here is my code it is not working btw. 这是我的代码,它不能正常工作。
View 视图
<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">
Controller 调节器
public function findPrice(Request $request){
$p=Product::select('aircrafts')->where('registred_company_name',$request->aircraft_id)->first();
return response()->json($p);
}
Web 卷筒纸
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(){
}
});
});
});
You're targeting the wrong element in the jquery. 您在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() {
. 在此行
$(document).on('change', '.aircraftsName', function() {
将目标元素从.aircraft_id
更改为.aircraftsName
。
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. 您可以将
aircraft_id
作为值添加到选择下拉列表中。 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>
Then your jquery could be as simple as this: 然后,您的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();
});
});
If you want to use an ajax call I've updated the code a little: 如果您想使用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(){
}
});
});
});
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;
由于这是一个
get
请求,因此您可以将id附加到url上,而不使用data参数: url: '/admin/settings/findAirName?id=' + air_id;
, but don't include the line data: {id: air_id}
. ,但不包括行
data: {id: air_id}
。
you can do it this way: 您可以这样操作:
VIEW 视图
<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 );
});
});
I've added id
on the select
and input
element 我在
select
和input
元素上添加了id
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.