web-dev-qa-db-fra.com

JQuery pour obtenir le texte sélectionné du menu déroulant

J'essaie d'obtenir le texte sélectionné dans la liste déroulante à l'aide de Jquery.

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

Ci-dessous est le Jquery que j'utilise. Mais ça ne marche pas ... j'ai essayé 

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

et renvoie [objet objet]. Mais comment lire le texte sélectionné?

Ensuite j'ai essayé 

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

Ensuite, il revient vide.

J'ai aussi essayé 

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

Cela est également retourné vide.

Je peux renvoyer l'ID selected en utilisant

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

Mais pourquoi pas le texte sélectionné?

Y at-il quelque chose de mal avec mon Jquery ici? S'il vous plaît aider 

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


            });

Ceci est le code HTML pour ma liste déroulante ci-dessous

<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>
jqueryasp.net-mvc-3
24
Millar

J'ai eu le même problème hier :-)

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

J'ai aussi lu que c'est lent, si vous voulez l'utiliser souvent, vous devriez probablement utiliser autre chose.

Je ne sais pas pourquoi le tien ne fonctionne pas, celui-ci est pour moi, peut-être que quelqu'un d'autre peut aider ...

58
Philipp

Sans ID de liste déroulante:

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

Le problème pourrait être sur cette ligne:

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

Il recherche l'élément avec l'ID SelectedCountryId sélectionné, pour lequel vous souhaitez réellement l'option sélectionnée sous SelectedCountryId, alors essayez:

$('#SelectedCountryId option:selected').text()
3
Rob Rodi

Aujourd'hui, avec jQuery, je fais ceci:

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

\#foo est l'id de la liste déroulante.

Lire plus .

2
foobarfuu

définissez d'abord l'attribut id de dropdownlist comme je le fais ici, puis utilisez cet identifiant pour obtenir une valeur dans jquery ou javascrip.

la liste déroulante: 

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

jquery: 

var id = jQuery("#ddlCompany option:selected").val();
1
Imran
//Code to Retrieve Text from the Dropdownlist 

$('#selectOptions').change(function()
{
     var selectOptions =$('#selectOptions option:selected');
     if(selectOptions.length >0)
     {
        var resultString = "";
        resultString = selectOptions.text();
     }
});
1
Gobind Gupta
    <%@ 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

Merci...:)

0
Bhanu pratap

Si vous utilisez un <select>, $(this).val() dans l'événement change() renvoie la valeur de l'option actuellement sélectionnée. L'utilisation de text() est la plupart du temps redondante, car elle est généralement identique à la valeur et, dans le cas contraire, vous finirez probablement par utiliser la valeur dans le back-end et non le texte. Donc, vous pouvez simplement faire ceci:

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

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

EDIT: Notez que si votre attribut value est vide, la plupart des navigateurs utilisent le contenu en tant que valeur, donc cela fonctionnera dans les deux cas.

0
elclanrs

Obtenir le texte d'un multiple déroulant

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

textes contient maintenant une liste de texte sélectionné

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

cela a fonctionné pour moi, ici au lieu de [0], passez l’index sélectionné de votre liste déroulante. 

0
Nirja Pathak

S'il vous plaît utiliser cette

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

Alors, alertez "selValue" et "selText". Vous obtenez votre liste déroulante sélectionnée et le texte

0
Mohammed Shaheen MK