Bind HTML Dropdown List using JQuery and SharePoint Web Services

Please go to this post to understand what  JS files you need to download to achieve the required functionality.

In Page:-

You should have the Country dropdown this way.

<select id=’ddlCountry’><option></option></select>

var strSiteUrl = "http://SPSERVER:100";

var objList = new SPAPI_Lists(strSiteUrl);

function BindDropDown()

{

    var sQuery = "<Query><OrderBy><FieldRef Name='ID' /></OrderBy></Query>";

    var strViewFields = "<ViewFields><FieldRef Name='Title' /><FieldRef Name='ID' /></ViewFields>";

    var result = objList.getListItems("Country", "", sQuery, strViewFields, "", "", "");

   

    var strBindDropDown = "";

    strBindDropDown += "<Option>";

    strBindDropDown += "--Select Country--";

    var ItemRows = '';

    if ($.browser.webkit)

    {

        ItemRows = "row";

    }

    else

    {

        ItemRows = "z\\:row";

    }

    if ($(result.responseXML).find(ItemRows).length > 0)

    {

        $(result.responseXML).find(ItemRows).each(function ()

        {

            strBindDropDown += "<Option value=" + $(this).attr('ows_ID') + ">";

            strBindDropDown += $(this).attr('ows_Title')

            strBindDropDown += "</Option>";

        });

    }

    strBindDropDown += "</Option>";

    $("#ddlCountry").html(strBindDropDown);

}

_spBodyOnLoadFunctionNames.push("BindDropDown");