How can I populate a dropdown with a SP list?

Question

I have a SP List with data that I need to be in a dropdown list. I also need these to have specific classes.

I'm trying something like the following but having no luck:

 $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "High_Risk_Countries",


    completefunc: function (xData, Status) {
    if(Status == 'success' )
    {


         $(xData.responseXML).SPFilterNode("z:row").each(function() {

                //var value= $(this).attr("Title");
                var text = $(this).attr("highriskCountries")

                    $("select[title='country1']").append($('<option></option>').val(text).html(text));             

     });
    }
  }
});

With the following HTML:

<select id="country1" title="country1"/>

Answer 1

Kindly refer to the attached code using SPServices to bind drop down list.

<script src="/_layouts/divy/Scripts/jquery-1.7.min.js" language="javascript" type="text/javascript"></script>

<script src="/_layouts/divy/Scripts/jquery.SPServices-0.7.0.js" language="javascript"
    type="text/javascript"></script>



<script type="text/javascript">
    $(document).ready(function() {

        function displayVals() {

            var ddlRole_Client = document.getElementById('<%=ddlRole.ClientID%>');
            var listBox_client = document.getElementById('<%=listDomain.ClientID%>');

            if (!ddlRole_Client.selectedIndex == 0) {
                getDomain(ddlRole_Client)
            }
            else {
                removeListBoxItem(listBox_client);
                InsertEmptyDomain(listBox_client);
            }

        }
        $("#<%= ddlRole.ClientID %>").change(displayVals);
        displayVals();
    });
</script>

<script type="text/javascript" language="javascript">
    //Common Functions
    function InsertSelectDomain(listId) {
        var TopItem = document.createElement('option');
        TopItem.text = "Select Domain...";
        TopItem.value = "0";
        listId.options.add(TopItem);
    }

    function InsertEmptyDomain(listId) {
        var TopItem = document.createElement('option');
        TopItem.text = "No Domain exist for the selected Role";
        TopItem.value = "0";
        listId.options.add(TopItem);
    }

    function removeListBoxItem(selectbox) {
        var i;
        for (i = selectbox.options.length - 1; i >= 0; i--) {
            //selectbox.options.remove(i);
            selectbox.remove(i);

        }
    }


    function getDomain(ddlRole_Client) {

        var Role = ddlRole_Client.value;
        var webMethod = '/_vti_bin/lists.asmx'
        var query = "<Query><Where><Eq><FieldRef Name='Title' /><Value Type='Text'>" + Role + "</Value></Eq></Where><OrderBy><FieldRef Name='Domain' Ascending='True' /></OrderBy></Query>"
        $().SPServices({
            operation: "GetListItems",
            listName: "Designation",
            async: false,
            CAMLQuery: query,
            completefunc: function(xData, status) {

                var listBox_client = document.getElementById('<%=listDomain.ClientID%>');
                removeListBoxItem(listBox_client);
                InsertSelectDomain(listBox_client);

                $(xData.responseXML).find("z\\:row").each(function() {
                    var dummyList = document.createElement('option');
                    dummyList.text = $(this).attr("ows_Domain");
                    listBox_client.options.add(dummyList);
                });
            }

        });
    }

</script>

Answer 2

using Jquery should by

$(xData.responseXML).SPFilterNode("z:row").each(function() {
    var text = $(this).attr("highriskCountries")
    $("select[title='country1']").append($('<option/>', {
        value: text,
        text: text
    })
});

Greetings