Ajax在下拉列表中包含数据

时间:2018-02-12 06:35:40

标签: javascript jquery ajax

目前我正在从api中检索数据。数据包含id和charity_name。它必须在下拉列表中。目前成功地在下拉列表中显示慈善机构名称,但卡在ID上。如何在下拉列表中的选项中包含ID?



$.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
    		}));
    	});
    }
});
&#13;
<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>
&#13;
&#13;
&#13;

有人能指出我正确的方向吗?

感谢。

2 个答案:

答案 0 :(得分:0)

在例如

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

答案 1 :(得分:0)

对你有帮助

&#13;
&#13;
$(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) { 
        	
        }
    });*/


})
&#13;
<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>
&#13;
&#13;
&#13;