javascript - 在 Laravel 中选择国家后没有出现任何状态
问题描述
当我选择国家时,州选择选项不会出现,并且没有州可以选择城市。这是一些文本,因为如果代码太多,stackoverflow 不允许使用以下文本。因为它仍然不允许我,所以这里有更多的文字。
地址控制器
use App\Country;
use App\State;
use App\City;
public function country() //Fetches Country Perfectly
{
$countries= Country::all();
return view('address')->with('countries',$countries);
}
public function getStates($id) //Not fetching states
{
$states = State::where("country_id",$id)->get()->pluck("state_name","id");
return response()->json($states);
}
public function getCities($id) //Not fetching cities
{
$cities= City::where("state_id",$id)->get()->pluck("city_name","id");
return response()->json($cities);
}
路线
Route::get('/address/country', 'AddressController@country');
Route::get('/getStates/{id}','AddressController@getStates');
Route::get('/getCities/{id}','AddressController@getCities');
地址.blade
<select name="country" id="country">
<option value="">Select Country</option>
@foreach ($countries as $country)
<option value="{{$country->ID}}">{{$country->name}}</option> //fetching all the country
@endforeach
</select>
<select name="state" id="state"> // no result after country selection
</select>
<select name="city" id="city"> //no result as no state selected
</select>
//Here's a Javascript Code for the country.blade
<script type="text/javascript">
$('#country').change(function(){
var cid = $(this).val();
if(cid){
$.ajax({
type:"get",
url:"{{ url('/state') }}/"+cid,
success:function(res)
{
if(res)
{
$("#state").empty();
$("#city").empty();
$("#state").append('<option>Select State</option>');
$.each(res,function(key,value){
$("#getStates").append('<option value="'+key+'">'+value+'</option>');
});
}
}
});
}
});
$('#state').change(function(){
var sid = $(this).val();
if(sid){
$.ajax({
type:"get",
url:"{{url('/getCities')}}/"+sid,
success:function(res)
{
if(res)
{
$("#city").empty();
$("#city").append('<option>Select City</option>');
$.each(res,function(key,value){
$("#city").append('<option value="'+key+'">'+value+'</option>');
});
}
}
});
}
});
</script>
这里是控制台日志
[Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
1172|
1173| <script type="text/javascript">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1174| $('#country').change(function(){
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1175| var cid = $(this).val();
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1176| if(cid){
| ^^^^^^^^^^^^^^^^
1177| $.ajax({
| ^^^^^^^^^^^^^^^^
1178| type:"get",
| ^^^^^^^^^^^^^^^^^^^^^^
1179| url:"http://localhost/blog/public/getStates/"+cid,
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1180| success:function(res)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1181| {
| ^^^^^^^^^^^^^^^^^^^
1182| if(res)
| ^^^^^^^^^^^^^^^^^^^^^^^
1183| {
| ^^^^^^^^^^^^^^^^^
1184| $("#state").empty();
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1185| $("#city").empty();
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1186| $("#state").append('<option>Select State</option>');
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1187| $.each(res,function(key,value){
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1188| $("#state").append('<option
value="'+key+'">'+value+'</option>');
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1189| });
| ^^^^^^^^^^^^^^^^^^^^^^^
1190| }
| ^^^^^^^^^^^^^^^^^
1191| }
| ^^^^^^^^^^^^
1192|
|
1193| });
| ^^^^^^^^^^^
1194| }
| ^^^^^^^^^
1195| });
| ^^^^^^^
1196| $('#state').change(function(){
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1197| var sid = $(this).val();
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1198| if(sid){
| ^^^^^^^^^^^^^^^^
1199| $.ajax({
| ^^^^^^^^^^^^^^^^
1200| type:"get",
| ^^^^^^^^^^^^^^^^^^^^^^
1201| url:"http://localhost/blog/public/getCities/"+sid,
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1202| success:function(res)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1203| {
| ^^^^^^^^^^^^^^^^^^^
1204| if(res)
| ^^^^^^^^^^^^^^^^^^^^^^^
1205| {
| ^^^^^^^^^^^^^^^^^
1206| $("#city").empty();
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1207| $("#city").append('<option>Select City</option>');
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1208| $.each(res,function(key,value){
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1209| $("#city").append('<option
value="'+key+'">'+value+'</option>');|^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
1210| });
| ^^^^^^^^^^^^^^^^^^^^^^^
1211| }
| ^^^^^^^^^^^^^^^^^
1212| }
| ^^^^^^^^^^^^
1213|
|
1214| });
| ^^^^^^^^^^^
1215| }
| ^^^^^^^^^
1216| });
| ^^^^^^^^
1217| </script>
解决方案
在使用 pluck 之前,您需要获得结果。Pluck 是 laravel 集合的一种方法。
public function getStates($id)
{
$states = State::where("country_id",$id)->get()->pluck("state_name","id");
return response()->json($states);
}
public function getCities($id)
{
$cities= City::where("state_id",$id)->get()->pluck("city_name","id");
return response()->json($cities);
}
另外,您的州路线应该是:
Route::get('/getStates/{id}','AddressController@geStates');
推荐阅读
- android-automotive - 为 Android Automotive OS 和 Android Auto 开发应用程序有什么区别?
- c# - C# how to Make function/Method Wait without blocking program (Unity)
- php - 读取 csv 并将其列写入另一个 csv 文件
- django-models - 使用基于类的视图和自定义 ModelForm 的 request.user 表单提交错误
- rust - 是否可以使用类型注释进行解构赋值?
- azure - 有没有办法设置 Azure Web 作业参数(在 Azure 门户中),然后通过单击“运行”按钮运行它?
- sql - 如何在我的 SELECT 语句中使用 postgres 变量?
- ansible - playbook 中的条件语句,用于根据命令中传递的变量将文件复制到两个不同的位置
- python - 熊猫数据框选择包含特定字符串值的所有列
- python-3.x - 当我尝试注册时,yowsup 库不起作用