I have a html dropdown list(team name) which contains three values A,B,C

I have a sharepoint 2010 List A which contains Team name and Email.

List A

Teamname Email

A [email protected]

B [email protected]

C [email protected]

My requirment is if i select the html dropdown A, I need to display the [email protected] in alert box using javascript

if i select the html dropdown B, I need to display the [email protected] in alert box using javascript

if i select the html dropdown C, I need to display the [email protected] in alert box using javascript

Please help

Thanks in advance.

4 Answers 4


These other answers tend to be too simple or way too complicated... ;)

This should do what you want, you just might need to change the url variable and the select parameters to conform with your environment -- but I took my best guess based on the information you provided. You could also remove the jQuery reference if your page already has it.

Here is a complete source for a content editor:

Editted to remove excess html manipulation

<select id="mySelect">
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.js"></script>    
(function() {
    // use ListData.svc with a REST API call to retrieve the data from your list
    var url = "/_vti_bin/ListData.svc/ListA?$select=Teamname,Email";
    $.getJSON(url, function(data) {
        //then update the select element with the results of your REST call
        var itemId,
        // include the initial string value, like below, if you want an empty option to appear as the default
        var optionsArr = ["<option></option>"];
        var inputElement = $('#mySelect');
        for (var i = 0; i < data.d.results.length; i++) {
            itemId = data.d.results[i].Teamname;
            itemVal = data.d.results[i].Email;
            //create the options that have a 'text' of the team name
            //and push their html strings into an array we'll use outside the loop
            optionsArr.push("<option value='" + itemVal + "'>" + itemId + "</option>");
        // join the contents of the array and assign the result string to the html of the inputElement
        // assign the change event to provide an alert of the selected option value
        inputElement.on('change', function() {
  • I never used REST in SP2010, is the /_api/lists/ endpoint not available in 2010?
    – wjervis
    Sep 3, 2014 at 14:40
  • 1
    Correct, no _api in 2010, it uses ListData.svc to provide the appropriate endpoints. There are some minor differences with how _api provides data in 2013 and this is naturally only list data, no webs or anything else... Here is the MSDN info specific to 2010: msdn.microsoft.com/en-us/library/ff798339.aspx
    – John-M
    Sep 3, 2014 at 14:44
  • I like this approach, much simpler than the one I proposed. I just propose a simple change here: inputElement.append("<option value='" + itemVal + "'>" + itemId + "</option>");
    – cubanGuy
    Sep 4, 2014 at 13:56

For this purpose you can use ECMAScript that is included to SharePoint. See this post for more details.

In you case all that you need is to provide correct query and process request.


This should do it. But you have to use jQuery and SPServices in order to make it work. You can create a simple HTML Select (If the options will not increase) or just can populate using SPServices in case that you list keeps growing.


<select id="dropdown"></select>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.01/jquery.SPServices.min.js"></script>
$(function () {
//Populates the dropdown list
    operation: "GetListItems",
    async: false,
    listName: "{ListID}",
    CAMLViewFields: "<ViewFields><FieldRef Name='Team' /><FieldRef Name='Email' /></ViewFields>",
    completefunc: function (xData, Status) {
        $(xData.responseXML).SPFilterNode("z:row").each(function () {
            var dropDown = "<option value='" + $(this).attr("ows_Team") + "'>" + $(this).attr("ows_Team") + "</option>";
        }); //end of each() funtion
    } //end of completeFunc
}); //end of SPServices

$('#dropdown').on('change', function () {
    var teamDropDown = $(this).val();

    SPServicesCall("<Query><Where><Eq><FieldRef Name='Team' /><Value Type='Text'>" + teamDropDown + "</Value></Eq></Where></Query>");

function SPServicesCall(CamlQuery) {
    var teamNamesArray = [];
    var emailsArray = [];
        operation: "GetListItems",
        async: false,
        listName: "{ListID}",
        CAMLViewFields: "<ViewFields><FieldRef Name='Team' /><FieldRef Name='Email' /></ViewFields>",
        CAMLQuery: CamlQuery,
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function () {
                var teamNames = $(this).attr("ows_Team");
                var emails = $(this).attr("ows_Email");
                teamNamesArray.push(teamNames); //just in case you need it
        } //end of  completefunc

    }); //end of SPServices

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script><script type="text/javascript">

// Execute the following JavaScript after the page has fully loaded, when it's ".ready"


//Set alert based on drop down selection 

 $("select[title='YourColumnNameHere]").change(function() {

  if ($("select[title='YourColumnNameHere']").val() == "Email A Selection Value") { 

  alert('[email protected]');

  } if($("select[title='YourColumnNameHere2]").val() == "Email B Selection Value"){ 

  alert('[email protected]');

  } if($("select[title='YourColumnNameHere3]").val() == "Email C Selection Value"){ 

  alert('[email protected]');

  • I don't think this would work, you are assuming that the data has been retrieved from SharePoint already.
    – cubanGuy
    Sep 3, 2014 at 1:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.