使用 jquery 从 json 数据文件动态填充选择元素

您可以执行以下操作(查看修订历史记录以获取使用下划线的较短版本(：

注释应该可以帮助您获得一个想法。 查看 https://api.jquery.com/以获取有关所用 jQuery 方法的详细信息。

$(function() {
  insert($('#state_id'), plucker(records, 'state'));
  //------------------------^ grabs unique states
  //--^ populate state list on DOM ready
  $('select').on('change', function() {
    var category = this.id.split('_id')[0];
    var value = $(this).find('option:selected').text();
    switch (category) {
      case 'state':
        {
          insert($('#district_id'), plucker(filter(records, 'state', value),'district'));
          //-^ insert plucked results to DOM
          //------------------------^ plucks districts from filter results
          //--------------------------------^ filters districts belonging to selected state
          break;
        }
      case 'district':
        {
          insert($('#village_id'), plucker(filter(records, 'district', value),'village'));
          break;
        }
    }
  });
   function plucker(arr, prop) {
   // grabs unique items from the required property such as state,  district etc from the results
    return $.map(arr, function(item) {
      return item[prop]
    }).filter(function(item, i, arr) {
       return arr.indexOf(item) == i;
    });
  }
  function filter(arr, key, value) { 
    // filters the records matching users selection
    return  $.grep(arr, function(item) {
         return item[key] == value;
    });
  }
  function insert(elm, arr) { // inserts the results into DOM
    elm.find('option:gt(0)').remove();
    $.each(arr, function(i,item) {
      elm.append($('<option>', {
        value: i,
        text: item
      }));
    });
  }
});

var records = [{
  "slno": "1",
  "state": "Maharashtra",
  "constituency": "Parbhani",
  "mp": "Shri Sanjay Haribhau Jadhav",
  "district": "Parbhani",
  "block": "Jintur",
  "village": "Kehal",
  "latitude": "77.7",
  "longitude": "19.33"
}, {
  "slno": "2",
  "state": "Maharashtra",
  "constituency": "Shirur",
  "mp": "Shri Shivaji Adhalrao Patil",
  "district": "Pune",
  "block": "Shirur",
  "village": "Karandi",
  "latitude": "77.7",
  "longitude": "19.33"
}, {
  "slno": "3",
  "state": "Maharashtra",
  "constituency": "Amravati",
  "mp": "Shri Anandrao Vithoba Adsul",
  "district": "Amravati",
  "block": "Amravati",
  "village": "Yavli Shahid",
  "latitude": "77.7",
  "longitude": "19.33"
}]
$(function() {
  insert($('#state_id'), plucker(records, 'state'));
  //------^ populate states list on DOM ready
  $('select').on('change', function() {
    var category = this.id.split('_id')[0];
    var value = $(this).find('option:selected').text();
    switch (category) {
      case 'state':
        {
          insert($('#district_id'), plucker(filter(records, 'state', value), 'district'));
          break;
        }
      case 'district':
        {
          insert($('#village_id'), plucker(filter(records, 'district', value), 'village'));
          break;
        }
    }
  });
  function plucker(arr, prop) {
    // grabs unique items from the required property such as state, district etc from the results
    return $.map(arr, function(item) {
      return item[prop]
    }).filter(function(item, i, arr) {
      return arr.indexOf(item) == i;
    });
  }
  function filter(arr, key, value) {
    // filters the records matching users selection
    return $.grep(arr, function(item, i) {
      return item[key] === value;
    });
  }
  function insert(elm, arr) {
    // inserts the results into DOM
    elm.find('option:gt(0)').remove();
    $.each(arr, function(i, item) {
      elm.append($('<option>', {
        value: i,
        text: item
      }));
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dummy__item">
  <select name="state_id" id="state_id" tabindex="1">
    <option value="">-- Select state --</option>
  </select>
</div>
<div class="dummy__item">
  <select name="district_id" id="district_id" tabindex="2">
    <option value="">-- Select district --</option>
  </select>
</div>
<div class="dummy__item">
  <select name="village_id" id="village_id" tabindex="3">
    <option value="">-- Select village --</option>
  </select>
</div>

在上面的代码中，您犯了以下错误，

1.超紧括号

    $.map(jsonList, function (el, i) {
        return $('<option>').val(el.slno).text(el.state)
    }));

将其更新为

    $.map(jsonList, function (el, i) {
        return $('<option>').val(el.slno).text(el.state)
    });

2. json 对象的循环

   $.map(jsonList.listval, function (el, i) {
           $('#state_id').append('<option value="'+el.slno+'" attState="'+el.state+'">'+el.state+'</option>');            
   });
   

为了避免多次相同的状态重复，在插入选项之前，您需要检查该条目是否已经存在于选项中，如果不存在，则将其添加到选择中，为此我引入了一个新的选项属性"attState"。请查看代码，您将了解我所做的事情。

$.map(jsonList.listval, function (el, i) {
    if ($("#yourSelect option[attState='" + el.state + "']").length == 0) {
        $('#yourSelect').append('<option value="' + el.slno + '" attState="' + el.state + '">' + el.state + '</option>');
    }
});

有关参考，请参阅

尝试：

function createOptiolist(list, name) {
  var state = list.map(function(obj) {
    return obj[name];
  });
  return state = state.filter(function(v, i) {
    return state.indexOf(v) == i;
  });
}
var state = createOptiolist(jsonList.listval, "state");
$.each(state, function(i, el) {
  $('#state_id').append('<option value="' + el + '">' + el + '</option>');
});
$('#state_id').on('change', function() {
  var state = $(this).find('option:selected').val();
  $('#district_id').empty();
  $.each(jsonList.listval, function(i, el) {
    if (el.state == state) {
      $('#district_id').append('<option value="' + el.district + '">' + el.district + '</option>');
    }
  })
});
$('#district_id').on('change', function() {
  var district = $(this).find('option:selected').val();
  $('#village_id').empty();
  $.each(jsonList.listval, function(i, el) {
    if (el.district == district) {
      $('#village_id').append('<option value="' + el.slno + '">' + el.village + '</option>');
    }
  })
});

演示

使用阿贾克斯演示

请尝试此操作

.HTML

<div class="dummy__item">
    <select name="state_id" id="state_id" tabindex="1">
        <option value="">-- Select state --</option>

    </select>
</div>
<div class="dummy__item">
    <select name="district_id" id="district_id" tabindex="2">
        <option value="">-- Select district --</option>
    </select>
</div>
<div class="dummy__item">
    <select name="village_id" id="village_id" tabindex="3">
        <option value="">-- Select village --</option>
    </select>
</div>

简讯

$(document).ready(function(){
            // JSON list
var jsonList = {"listval" : [
{
    "slno": "1",
    "state": "Maharashtra",
    "constituency": "Parbhani",
    "mp": "Shri Sanjay Haribhau Jadhav",
    "district": "Parbhani",
    "block": "Jintur",
    "village": "Kehal",
    "latitude": "77.7",
    "longitude": "19.33"
},
{
    "slno": "2",
    "state": "Maharashtra",
    "constituency": "Shirur",
    "mp": "Shri Shivaji Adhalrao Patil",
    "district": "Pune",
    "block": "Shirur",
    "village": "Karandi",
    "latitude": "77.7",
    "longitude": "19.33"
},
{
    "slno": "3",
    "state": "TEXAS",
    "constituency": "XYZ",
    "mp": "Shri ABC",
    "district": "dist1",
    "block": "block1",
    "village": "Yavli Shahid",
    "latitude": "77.7",
    "longitude": "19.33"
},
{
    "slno": "4",
    "state": "Maharashtra",
    "constituency": "Amravati",
    "mp": "Shri Anandrao Vithoba Adsul",
    "district": "Amravati",
    "block": "Amravati",
    "village": "Yavli Shahid",
    "latitude": "77.7",
    "longitude": "19.33"
}]}
// JSON LIST

function loadlist(selobj, url) {
    var categories = [];
    $(selobj).empty();
    $(selobj).append('<option value="0">--Select Category--</option>')
    $(selobj).append(
    $.map(jsonList.listval, function (el, i) {
     if ($.inArray(el.state, categories)==-1) {
    categories.push(el.state);
        return $('<option>').val(el.slno).text(el.state);
        console.log($(el.state));}
    }));
}

 loadlist($('#state_id').get(0), jsonList);

});