Using CAML, how can I bind two different list items to the one dropdown list on Sharepoint?

Question

I so far successfully bind one to a dropdown but can't figure out how to add the next data item (called "text")

  function loadCombo(context) {
        list = context.get_web().get_lists().getByTitle('HRC');
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml("<Query><Where></Where></Query>");

        listItems = list.getItems(camlQuery);
        context.load(listItems);
        context.executeQueryAsync(appendData, loadFailed);
    }

    function appendData(sender, args) {
        var enumerator = listItems.getEnumerator();
        while (enumerator.moveNext()) {
            var item = enumerator.get_current();
            $("#country1").append($('<option></option>').val(item.get_id()).html(item.get_item('Title')));

        }
    }

    function loadFailed(sender, args) {
        alert('list failed to load: ' + args.get_message());
    }
    $(document).ready(function() {
        var context = new SP.ClientContext.get_current();
        loadCombo(context);
    });

Answer 1

I Have modified your code.try this.

function loadCombo(context,listname) {
    list = context.get_web().get_lists().getByTitle(listname);
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("<Query><Where></Where></Query>");

    listItems = list.getItems(camlQuery);
    context.load(listItems);
    context.executeQueryAsync(appendData, loadFailed);
}

function appendData(sender, args) {
    var enumerator = listItems.getEnumerator();
    while (enumerator.moveNext()) {
        var item = enumerator.get_current();
        $("#country1").append($('<option></option>').val(item.get_item('Title')).html(item.get_item('Title')));

    }
}

function loadFailed(sender, args) {
    alert('list failed to load: ' + args.get_message());
}
$(document).ready(function() {
    var context = new SP.ClientContext.get_current();
    loadCombo(context,'HRC');
    loadCombo(context,'XYZ');
});