Jquery to get SelectedText from dropdown

Question

I am trying to get the selected Text from the dropdownlist using Jquery.

<div>
    @Html.DropDownList("SelectedCountryId", Model.CountryList, "(Select one Country)")
</div>

Given below is the Jquery that I am using. But this is not working. I tried

var selectedText1 = $("#SelectedCountryId").val($(this).find(":selected").text());

and is returning [object object]. But how to read the selected text?

Next I tried

var selectedText2 = $("#SelectedCountryId:selected").text();

Then it's returning empty.

I also tried

var selectedText2 = $("#SelectedCountryId option:selected").text();

This also returned empty.

I am able to return the selectedID using

var selectedID = $("#SelectedCountryId").val();

But why not the selected text?

Is there anything wrong with my Jquery here? Please help

<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#SelectedCountryId").change(function () {

                var selectedText1 = $("#SelectedCountryId").val($(this).find(":selected").text());
                var selectedText2 = $("#SelectedCountryId:selected").text();
                alert("You selected :" + selectedText1 + selectedText2 );


            });

This is the HTML for my dropdown below

<select id="SelectedCountryId" name="SelectedCountryId"><option value="">(Select one Country)</option>
<option value="19">USA</option>
<option value="10">Germany</option>
<option value="12">Australia</option> </select>

`you selected :" + selectedText1 + selectedText2`? as far as I know you can select just one option with `select` tag! — Ram, Apr 23 '12 at 23:39

score 70 · Accepted Answer · answered Apr 23 '12 at 23:34

70

I had the same problem yesterday :-)

$("#SelectedCountryId option:selected").text()

I also read that this is slow, if you want to use it often you should probably use something else.

I don't know why yours is not working, this one is for me, maybe someone else can help...

answered Apr 23 '12 at 23:34

Philipp

1,425
1
11
23

$("#SelectedCountryId option:selected").text() is not working for me .its just returning empty – Millar Apr 23 '12 at 23:43
@Millar: are you sure you do not have a different problem. Can you please post your html output. – Philipp Apr 23 '12 at 23:45
1

and you changed the value ;-)? have you tried to change it several times in a row. Can you try to add a value other than an empty string at the first option. It looks to me like you are always selecting the first one... – Philipp Apr 24 '12 at 00:14
I am able to read selected value with var selectedID = $("#SelectedCountryId").val(); and I can see diff values based on my selection .But I am not finding a way to get the selected text – Millar Apr 24 '12 at 00:20
I tried this code: ` ` This is working great for me with jquery-1.7.1 -- sorry, linebreaks are removed :-( – Philipp Apr 24 '12 at 00:27
@ Philipp Mehrwald Thank you for helping me .It started working after I deleted the first statement var selectedText1 = $("#SelectedCountryId").val($(this).find(":selected").text()); – Millar Apr 24 '12 at 00:33

score 10 · Answer 2 · answered Aug 27 '13 at 15:55

10

Without dropdown ID:

$("#SelectedCountryId").change(function () {
    $('option:selected', $(this)).text();
}

answered Aug 27 '13 at 15:55

MCurbelo

4,097
2
26
21

score 4 · Answer 3 · answered Jun 25 '15 at 09:16

4

Today, with jQuery, I do this:

$("#foo").change(function(){    
    var foo = $("#foo option:selected").text();
});

\#foo is the drop-down box id.

Read more.

answered Jun 25 '15 at 09:16

Vy Do

46,709
59
215
313

Should to keep this code inside $(document).ready(function () {}); – kavie Jul 05 '17 at 14:10

Rob Rodi · Answer 4 · 2012-04-24T01:02:02.917

3

The problem could be on this line:

            var selectedText2 = $("#SelectedCountryId:selected").text();

It's looking for the item with id of SelectedCountryId that is selected, where you really want the option that's selected under SelectedCountryId, so try:

$('#SelectedCountryId option:selected').text()

edited Apr 24 '12 at 01:02

answered Apr 23 '12 at 23:36

Rob Rodi

3,476
20
19

I tried $('#SelectedCountryId option:Selected').text() but its returning empty – Millar Apr 23 '12 at 23:41
I think i accidentally capitalized the `selected` – Rob Rodi Apr 24 '12 at 01:02

score 1 · Answer 5 · answered Aug 27 '16 at 13:50

first Set id attribute of dropdownlist like i do here than use that id to get value in jquery or javascrip.

dropdownlist:

 @Html.DropDownList("CompanyId", ViewBag.CompanyList as SelectList, "Select Company", new { @id="ddlCompany" })

jquery:

var id = jQuery("#ddlCompany option:selected").val();

score 1 · Answer 6 · answered Feb 27 '17 at 07:07

//Code to Retrieve Text from the Dropdownlist 

$('#selectOptions').change(function()
{
     var selectOptions =$('#selectOptions option:selected');
     if(selectOptions.length >0)
     {
        var resultString = "";
        resultString = selectOptions.text();
     }
});

score 0 · Answer 7 · answered Apr 23 '12 at 23:45

If you're using a <select>, $(this).val() inside the change() event returns the value of the current selected option. Using text() is redundant most of the time, since it's usually identical to the value, and in case is different, you'll probably end up using the value in the back-end and not the text. So you can just do this:

http://jsfiddle.net/elclanrs/DW5kF/

var selectedText2 = $(this).val();

EDIT: Note that in case your value attribute is empty, most browsers use the contents as value, so it'll work either way.

score 0 · Answer 8 · answered Nov 14 '12 at 16:25

0

Get text from a dropdown multiple

var texts = [];
$('#list :selected').each(function(){
    texts.push($(this).text());
});

texts now contains a list of selected text

answered Nov 14 '12 at 16:25

Thanh Trung

3,566
3
31
42

score 0 · Answer 9 · edited May 21 '14 at 07:24

0

$("#SelectedCountryId_option_selected")[0].textContent

this worked for me, here instead of [0], pass the selected index of your drop down list.

edited May 21 '14 at 07:24

Yohanes Khosiawan 许先汉

2,453
4
24
28

answered May 21 '14 at 06:54

Nirja Pathak

1

score 0 · Answer 10 · answered May 14 '15 at 11:51

Please use this

    var listbox = document.getElementById("yourdropdownid");
    var selIndex = listbox.selectedIndex;
    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;

Then Please alert "selValue" and "selText". You get your selected dropdown value and text

score 0 · Answer 11 · answered Aug 09 '16 at 17:11

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            $('#selectnumber').change(function(){
                alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select id="selectnumber">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
        </select>

    </div>
    </form>
</body>
</html>

Thanks...:)

Jquery to get SelectedText from dropdown

11 Answers11