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>
This question is related to
jquery
asp.net-mvc-3
The answer is
Today, with jQuery, I do this:
$("#foo").change(function(){
var foo = $("#foo option:selected").text();
});
\#foo is the drop-down box id.
Read more.
//Code to Retrieve Text from the Dropdownlist
$('#selectOptions').change(function()
{
var selectOptions =$('#selectOptions option:selected');
if(selectOptions.length >0)
{
var resultString = "";
resultString = selectOptions.text();
}
});
Get text from a dropdown multiple
var texts = [];
$('#list :selected').each(function(){
texts.push($(this).text());
});
texts now contains a list of selected text
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();
<%@ 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...:)
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
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()
Without dropdown ID:
$("#SelectedCountryId").change(function () {
$('option:selected', $(this)).text();
}
$("#SelectedCountryId_option_selected")[0].textContent
this worked for me, here instead of [0], pass the selected index of your drop down list.
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.
Source: Stackoverflow.com