如何使用jquery从JSON数据动态填充select元素？ [英] How to dynamically populate a select element from JSON data with jquery?

问题描述

我无法读取json文件日期以填充动态下拉列表



我尝试过：

I cant read the json file date to populate the dynamic dropdown list

What I have tried:

HTML:
    <p>
          <label for="people">People: </label>
           <select id="people" ></select>
            </p>

          <script type="text/JavaScript">

       $select = $('#people');

         $.ajax({
        url:   "http://localhost:58421/jsonfiles/person.json",
        dataType: 'JSON',
        success: function (data) {
           alert("data");
          $select.html('');
           $.each(data.person, function(key, val){
           $select.append('<option id="' + val.id + '">' + val.name + '</option>');
            })
            },
           error: function () {
           $select.html('<option id="-1">none available</option>');
               }
             });
           </script>

person.json：

person.json:

person": [
  {
    "id": "1",
    "name": "Person1"
  },
  {
    "id": "2",
    "name": "Person2"
  },
  {
    "id": "3",
    "name": "Person3"
  }
]}

推荐答案

select =

（'＃people'）;

('#people');

.ajax（{
url：http：// localhost：58421 / jsonfiles / person.json，
dataType：'JSON'，
success：function（data）{
alert（data）;

.ajax({ url: "http://localhost:58421/jsonfiles/person.json", dataType: 'JSON', success: function (data) { alert("data");

这篇关于如何使用jquery从JSON数据动态填充select元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！