How to get the displayed text of a cascading drop down list with 20+ items?

Sep 7, 2012 at 6:52 AM
Edited Sep 7, 2012 at 6:55 AM

Hi Marc. I've got a cascading drop down list with 20+ items in it. I am trying to get the displayed text of the drop down list that has been converted. I can't seem to obtain it using jQuery.

The code is as below.

<td class="WordCategory"><span dir="none"><span style="vertical-align:middle"><input name="ctl00$m$g_d3f2c715_3b7b_4866_a877_9fa4743d9ae8$ff10_1$ctl00$ctl01" type="text" value="class" id="ctl00_m_g_d3f2c715_3b7b_4866_a877_9fa4743d9ae8_ff10_1_ctl00_ctl01" class="ms-lookuptypeintextbox" onfocusout="CoreInvoke('HandleLoseFocus')" opt="_Select" title="ResolutionSubCategory" optHid="SPResolutionSubCategory_Hidden" onkeypress="CoreInvoke('HandleChar')" onkeydown="CoreInvoke('HandleKey')" match="" choices="class|1|cliff|2|cling|3|clink|4|clip|5|close|6|clot|7|club|8|clump|9|clung|10|cone|11|crab|12|craft|13|cram|14|cramp|15|crib|16|crime|17|crisp|18|crop|19|crust|20|cure|21|cute|22|" onchange="CoreInvoke('HandleChange')" /><img alt="Display lookup values" onclick="CoreInvoke('ShowDropdown','ctl00_m_g_d3f2c715_3b7b_4866_a877_9fa4743d9ae8_ff10_1_ctl00_ctl01');" src="/_layouts/images/dropdown.gif" style="border-width:0px;vertical-align:middle;" /></span><br/></span></td>

As you can see, the current selected item from the drop down list is "class" from the "value" attribute. I tried the following jQuery code below to show an alert but it doesn't work.

var test = $(".WordCategory :input").attr('text');

The above produces "undefined" from the alert.

var test = $(".WordCategory :input").val();

The above produces "1" from the alert.

var test = $(".WordCategory :input").text();

The above will produces the entire drop down list into the alert with a few lines.

Any idea how do I extract just the text being displayed in the drop down list Marc? Thank you for your time!

Sep 7, 2012 at 7:13 AM
Edited Sep 7, 2012 at 7:16 AM

Ok, this *always* happens. After I make a forum post, I get find the solution .. *grr*.

For everyone else, here's the code:

var test = $("#ctl00_m_g_d3f2c715_3b7b_4866_a877_9fa4743d9ae8_ff10_1_ctl00_ctl01").attr("value");

Referred to this link as well for the above solution.

It is possible not to refer to the ID but instead the class and after that the HTML tag however like the 3 snippet codes I posted earlier?

Sep 7, 2012 at 2:31 PM

Rather than using the full id for the element (which can change from environment to environment), try this:

var test = $("td.WordCategory input").val();


Sep 10, 2012 at 5:20 AM

Hi Marc, thank you for your reply. I have tried your suggestion and the snippet is returning me the actual value instead which is a numeric number.

From the code snippet in the first post, if the item "class" was selected, your code suggestion returns me "1" and not "class".

How do I go about getting the selected display text based on your suggestion? Thanks!

Sep 10, 2012 at 9:45 AM
Edited Sep 10, 2012 at 9:48 AM

Hello, I had the same problem in a newForm and found the solution with my friend called Google. I don't remember exactly where I found the solution but it works so here it is :


function SetLookup( fieldTitle, lookupVal)
    //Set default value for lookups with less that 20 items
    if ( $("select[title='" + fieldTitle + "']").html() !== null)
       $("select[title='"+ fieldTitle +"']").val(lookupVal);
        // values are stored in the attribut named 'choices'
        choices = $("input[title='" + fieldTitle +"']").attr("choices");
        hiddenInput = $("input[title='" + fieldTitle +"']").attr("optHid");
        $("input[id='" + hiddenInput +"']").attr("value",lookupVal)
        choiceArray = choices.split("|");
        for (index = 1; index < choiceArray.length; index = index + 2)
            if (choiceArray[index] == lookupVal)
                $("input[title='" + fieldTitle +"']").val(choiceArray[index - 1]);

So now with this you should be able to display your lookup field by calling the function with the value you want to set and the integer on the right.

Sep 10, 2012 at 9:48 AM
Edited Sep 10, 2012 at 9:54 AM

Hi Morbius, I'll try this. I've seen it over in Google as well but didn't give it a go.

Sep 11, 2012 at 8:38 PM

Here's the internal function I use in SPServices. Perhaps I should expose it as a public function?


 // Returns the selected value(s) for a dropdown in an array. Expects a dropdown object as returned by the DropdownCtl function.
 // If matchOnId is true, returns the ids rather than the text values for the selection options(s).
 function getDropdownSelected(columnSelect, matchOnId) {
  var columnSelectSelected = [];
  switch(columnSelect.Type) {
   case "S":
    if(matchOnId) {
     columnSelectSelected.push(columnSelect.Obj.find("option:selected").val() || []);
    } else {
     columnSelectSelected.push(columnSelect.Obj.find("option:selected").text() || []);
   case "C":
    if(matchOnId) {
     columnSelectSelected.push($("input[id='"+ columnSelect.Obj.attr("optHid") + "']").val() || []);
    } else {
     columnSelectSelected.push(columnSelect.Obj.attr("value") || []);
   case "M":
    var columnSelections = columnSelect.Obj.closest("span").find("select[ID$='SelectResult']");
    $(columnSelections).find("option").each(function() {
  return columnSelectSelected;
 } // End of function getDropdownSelected
Sep 12, 2012 at 1:36 PM

+10 Marc! 

Rackley's code is okay and get's the job done, but his example creates global variables for no apparent reason and can/will eventually cause issues with other code on your page. Your method feels a lot cleaner.

However, if you open it up, you have to maintain it. Double-edged sword...


Sep 12, 2012 at 1:53 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Sep 14, 2012 at 4:33 AM

Marc, thanks for pushing this as a work item. Looking forward to this feature when it is released, thanks a lot!

Apr 9, 2013 at 9:54 AM
Hi, thanks for your help.
How can I use the getDropdownSelected method? what is the columnSelect parameter??
I have tried to put my column field name but the columnSelect.Type is undefined.
Could you help me?

Thanks in advance.

Apr 9, 2013 at 11:27 PM
The getColumnSelected function is what I use inside SPServices to get the dropdown values, regardless the type. It requires a dropdown opbect (columnSelect) as identified by the DropDownCtl function. You're welcome to use those private functions, but since I haven't exposed them as public functions, you'll need to figure them out yourself.

Aug 9, 2014 at 12:36 PM
Hi Mark,

I am trying to get the text displayed by a SPComplexToSimpleDropdown_MyDropDown. There are two things which I can't figure out so far.
one - I am not able to associate an event to the dropdown, change/click is not working..
I have been using
second: As the goal is to get the value of the text displayed, I have associated with another required control but I am still not getting the text, I am getting the value..
<option value="359">
text - ABCD
i can get 359 but I am not able to get ABCD..

Thanks in Advance..

Aug 9, 2014 at 9:20 PM
This sounds more like a jQuery selector question than SPServices related.

Maybe this will help:

Re: One
Place single quotes are around 'ff14' and see if that helps.

Re: Two
You did not post your code, so I assume you are using some thing like this to get the value;


What you need is:

$("select option:selected").text()

Paul T.

-- Sent from Mobile

Aug 12, 2014 at 11:15 AM
Thanks Paul for the response.

Actually, I was trying to get a change event for a complex dropdown list which I changed to simple using spservices SPComplecToSimpleDropdownlist and I was using name to select the input as I have mentioned in the question.

Later, I found out such dropdownlist doesn't have a name, which was coming "undefined" once I started checking for their names. So, I wrote a change event based on their Ids and it worked.
and the second query, I tried something go around it... I selected all the dropdowns and then checked for the text in string being built..

once I had the change event, I could get the text by using option:selected.

Aug 12, 2014 at 3:22 PM

If the ID of the select is "undefined", then I have a bug. What version of SharePoint, jQuery, and SPServices are you using?

Aug 18, 2014 at 11:18 PM
Edited Aug 18, 2014 at 11:18 PM

The id of the select is SPComplexToSimple_MyDropDown but as I was using names to select the control, names for such selects are coming undefined.

I have been working on sharepoint 2007 and jquery and spservices are latest downloads.