JSON 对象使用 javascript 填充到我的 html 选择中答案

【问题标题】：JSON object populate in my html select using javascriptJSON 对象使用 javascript 填充到我的 html 选择中
【发布时间】：2018-02-14 10:39:27
【问题描述】：

我是 ajax 的初学者。现在我正在使用 Laravel 5.4，我想填充我在控制器中查询的城市，以便在我的视图中输出。

这是我的代码：

function getCities(province_id) {
    $('#city_id').empty();
    $.ajax({         
         url: "{{ url('city') }}/" +province_id,        
         type: "GET",
         dataType: "JSON",
            success: function(data) {
                var opts = $.parseJSON(data);
                // Use jQuery's each to iterate over the opts value
                $.each(opts, function(i, d) {                    
                    $('#city_id').append('<option value="' + d.city_id + '">' + d.city_name + '</option>');
                });
            }
    }); 
}

在我的控制器中，我有这个：

public function getmycity($province_id) {
        $cities = DB::table('cities')
        ->select('cities.city_id','cities.city_name')
        ->where(['cities.province_id' => $province_id])
        ->get();

        return $cities;
    }

我的网络中已经有一个 json 对象的返回，并且我已经看到了所有的数据对象。

JSON    
0   Object
city_id 28
city_name   Test City

请帮我把它全部放在我的选择中。

我没有收到错误，但它没有用我的查询值填充我的选择类型。

这是我的看法：

 <div class="form-group">
                <label class="control-label col-sm-4" for="email">City/Municipality :</label>
                <div class="col-sm-8">
                   <select class="form-control" id="city_id" name="city_id">
                        <option>Select city/municipality</option>                   
                    </select>
                </div>
              </div>

【问题讨论】：

您好，如果您的 getmycity 方法正确返回 JSON，则应相应地填充选择下拉菜单。请在此处查看它的工作原理：jsfiddle.net/tjg8rmgu/2
或者您可以使用以下行进行检查 return response()->json($cities);在 getmycity 方法中。
@Rakib 请先生帮帮我，但答案不是我的问题的解决方案
语法错误：JSON.parse：JSON 数据的第 1 行第 1 列出现意外字符
在success方法中去掉JSON.parse即可：var opts = data;

标签： javascript jquery json select

【解决方案1】：

尝试将您的数据库结果更改为纯数组，如下所示：

$cities = json_decode(json_encode($cities),true);

然后return它：

return $cities;

而且，当你写了 dataType : 'JSON' 那么不需要解析你的响应，你可以试试没有var opts = $.parseJSON(data); 这样var opts = data;

希望对您有所帮助...

【讨论】：

嘿，Jc John，很高兴我的回答对您有所帮助。请问我可以投赞成票吗？非常感谢... :-)
opps hello @Himanshu 先生，我认为它已经解决了我的问题，但仍然没有填充
语法错误：JSON.parse：JSON 数据的第 1 行第 1 列出现意外字符
我添加了我的观点
当你写了 dataType : 'JSON' 然后不需要解析你的响应，你可以试试没有var opts = $.parseJSON(data); 这样var opts = data;