<p>
List 1: <select id='c1'></select>
</p>
<p>
List 2: <select id='c2'></select>
</p>
<p>
<button id='loadlists'>Load the Lists</button> <button id='clearlists'>Clear the Lists</button>
</p>body
{
font-family:"Trebuchet MS", Helvetica, sans-serif
}function loadlist(listid)
{
$(listid).html('');
$.getJSON('https://codepen.io/prasanthmj/pen/yrjon.js',function(list)
{
jQuery.each(list, function(i,obj)
{
$(listid).append($('<option></option>').val(obj['value']).html(obj['name']));
});
});
}
$('#loadlists').click(function()
{
loadlist('#c1');
loadlist('#c2');
});
$('#clearlists').click(function()
{
$('#c1').html('');
$('#c2').html('');
});
External CSS
This Pen doesn't use any external CSS resources.