如何使用数组和Jquery填充下拉列表

时间:2019-07-04 20:58:13

标签: javascript jquery ajax

我在尝试使用“ jquery”填充下拉列表时遇到麻烦。我有一个称为Newjson的对象数组,并且我试图用此数据填充下拉列表。注意:我已经通过AJAX获得了数据,该数据存储在一个名为json的普通对象中,我对该对象进行了操作以使其反转,从而将其转换为对象数组。

我要配置的下拉列表的一些HTML代码:

   <div>
        <h2>Lista de Grupos</h2>
        <form method="post">
            <input type="hidden" name="form" value="alunos" />
            <div>
                <label for="IDUnidade">Unidade</label>
                <select id="IDUnidade" name="IDUnidade">
                    <option value="">Selecione...</option>
                </select>
            </div>
            <div>
                <label for="titulo">Visita</label>
                <select id="titulo" name="titulo">
                    <option value="">Selecione...</option>
                </select>
            </div>
            <div class="form-control">
                <button type="submit" name="submit" 
               value="manage">Enviar</button>
            </div>
        </form>
    </div>

确切地说,这是我尝试过的javascript代码:

jQuery(document).ready(function($){
    $('#IDUnidade').on('change', function(){
    $.ajax({
          url: location.href,
      dataType: 'json',
      data: $(this).attr('name') +'='+ $(this).val(),

           success: function(json){
           $('#titulo').html('<option value="">Selecione...</option>');

        const reversedKeys = Object.keys(json).reverse();
        const newjson = reversedKeys.map(e => ({[e]: json[e]}) );

                console.log(newjson);


               $('#titulo').populate(newjson, {'keys' : true, 'origin' : 'TOP'});




populate()似乎无法使用对象数组填充表单,它仅用数组的元素之一填充表单。

无论如何,我会感谢你们可能提供给我的任何帮助。非常感谢。

1 个答案:

答案 0 :(得分:0)

$(document).ready(function(){
  $('#IDUnidade').on('change', function(){
    $.ajax({
      type: 'POST',
      data: $(this).attr('name') +'='+ $(this).val(),
      dataType: 'JSON',
      url: target,
      success: function(d) {
        for (let i=0; i<d.length; i++) {
          $('#titulo').append('<option value="'+d[i].value+'">'+d[i].name+'</option>')
        }
      }
    })
  })
}