CODEWITHSUNDEEP
jqueryasp.net-mvc-3
Millar
Millar

Reputation: 1095

Jquery to get SelectedText from dropdown

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>

Upvotes: 29

Views: 139508

Answers (11)

Gobind Gupta
Gobind Gupta

Reputation: 223

//Code to Retrieve Text from the Dropdownlist 

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

Upvotes: 1

Imran
Imran

Reputation: 11

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();

Upvotes: 1

Bhanu Pratap
Bhanu Pratap

Reputation: 1761

    <%@ 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>

Click to see Output Screen

Thanks...:)

Upvotes: 0

Vy Do
Vy Do

Reputation: 52516

Today, with jQuery, I do this:

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

\#foo is the drop-down box id.

Read more.

Upvotes: 4

Mohammed Shaheen MK
Mohammed Shaheen MK

Reputation: 1219

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

Upvotes: 0

Nirja Pathak
Nirja Pathak

Reputation: 1

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

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

Upvotes: 0

MCurbelo
MCurbelo

Reputation: 4143

Without dropdown ID:

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

Upvotes: 10

Thanh Trung
Thanh Trung

Reputation: 3804

Get text from a dropdown multiple

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

texts now contains a list of selected text

Upvotes: 0

Rob Rodi
Rob Rodi

Reputation: 3494

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()

Upvotes: 3

elclanrs
elclanrs

Reputation: 94101

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.

Upvotes: 0

Philipp
Philipp

Reputation: 1445

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...

Upvotes: 70

Related Questions