使用jQuery从JSON数据文件动态填充选择元素 [英] Populate select elements dynamically from json data file using jquery

问题描述

我正在尝试为州县和村庄创建搜索框，但可以将数据提取到组合框中.

I'am trying to create search box for state districts and villages , but I'am enable to fetch data into combobox.

我尝试了许多其他方法将数据放入选择框，但它们不起作用.下面是我到目前为止的代码:

I have tried so many other way to get data into select boxes they doesn't work. Below is the code I've so far:

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>

JS:

<!-- language: lang-js -->

function loadlist(selobj, url) {
  $(selobj).empty();
  $(selobj).append('<option value="0">--Select Category--</option>')
  $(selobj).append(
    $.map(jsonList, function(el, i) {
      return $('<option>').val(el.slno).text(el.state)
    }));
}
loadlist($('select#state_id').get(0), jsonList);

推荐答案

您可以执行以下操作(检查修订历史记录以查找使用下划线):

You can do the following (Check the revision history for a shorter version which made use of underscorejs):

这些评论应该可以帮助您获得一个想法.检查 https://api.jquery.com/以获取有关所使用的jQuery方法的详细信息.

The comments should help you get an idea. check https://api.jquery.com/ for detailed information regarding the jQuery methods used.

$(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>

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