<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.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js