Ajax Включить данные в выпадающий список

Question

В настоящее время я получаю данные из API. Данные содержат id и charity_name. Это должно быть в выпадающем списке. В настоящее время успешно показать имя благотворительности в раскрывающемся списке, но застрял на идентификатор. Как я могу включить идентификатор в опцию в выпадающем списке?

$.ajax({ 
    type: 'GET', 
    url: 'http://ayambrand-com-my-v1.cloudaccess.host/administrator/index.php?option=com_echarity&format=raw&task=api.get_charities', 
    data: { get_param: 'value' }, 
    dataType: 'json',
    success: function (data) { 
     $.each(data, function(index, element) {
      $('#list').append($('<option>', {
       text: element.charity_name
      }));
     });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div>
    <form>
    <table class="a">
     <tr>
     <td>
      <select id="list">

      </select>
     </td>
     </tr>

    </table>
     <table class="b">
     <tr>
     <td>
     <span>Content</span>
     </td>
     </tr>
     </table>
    </form>
</div>

Может ли кто-нибудь указать мне правильное направление?

Благодарю.

Answer 1

Просто используйте value: id в например

$('#list').append($('<option>', {
         text: element.charity_name,
         value: element.id
        }));

Answer 2

Это будет полезно для вас

$(function(){

//place this inside your ajax success
var data=[{id:1,charity_name:"One"},{id:2,charity_name:"two"}];
var html="";
$.each(data, function(index, element) {
    html+="<option value="+element.id+">"+element.charity_name+"</option>";
});
$('#list').append(html);
          
    /*$.ajax({ 
        type: 'GET', 
        url: 'http://ayambrand-com-my-v1.cloudaccess.host/administrator/index.php?option=com_echarity&format=raw&task=api.get_charities', 
        data: { get_param: 'value' }, 
        dataType: 'json',
        success: function (data) { 
         
        }
    });*/


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div>
  <form>
  <table class="a">
    <tr>
    <td>
      <select id="list">

      </select>
    </td>
    </tr>

  </table>
   <table class="b">
   <tr>
   <td>
   <span>Content</span>
   </td>
   </tr>
   </table>
  </form>
</div>