web-dev-qa-db-ja.com

ドロップダウンから選択されたテキストを取得するJquery

Jqueryを使用して、ドロップダウンリストから選択したテキストを取得しようとしています。

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

以下は、私が使用しているJqueryです。しかし、これは機能していません。私は試した

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

[オブジェクトオブジェクト]を返しています。しかし、選択したテキストの読み方は？

次に試した

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

その後、空に戻ります。

私も試しました

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

これも空を返しました。

を使用してselectedIDを返すことができます

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

しかし、選択したテキストはなぜですか？

ここで私のJqueryに何か問題がありますか？助けてください

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


            });

これは、下のドロップダウンのHTMLです

<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
25
Millar

昨日も同じ問題がありました:-)

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

また、これは遅いと読みました。頻繁に使用したい場合は、おそらく別のものを使用する必要があります。

私はあなたのためのものが機能していない理由がわかりません、これは私のためです、多分他の誰かが助けることができる...

61
Philipp

ドロップダウンIDなし：

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

問題は次の行にある可能性があります。

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

選択されているSelectedCountryIdのidを持つアイテムを探しています。本当に選択されているオプションが必要な場合は、nderSelectedCountryIdです。

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

今日、jQueryを使用してこれを行います。

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

\#fooはドロップダウンボックスIDです。

読み取り 詳細 。

3
Do Nhu Vy

最初にドロップダウンリストのid属性を設定します。ここでは、そのidを使用してjqueryまたはjavascripで値を取得します。

ドロップダウンリスト：

 @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

ありがとう... :)

0
Bhanu Pratap

_<select>_を使用している場合、$(this).val()イベント内のchange()は、現在選択されているオプションの値を返します。 text()の使用はほとんどの場合冗長です。これは通常値と同じであり、場合によってはテキストではなくバックエンドで値を使用することになるためです。だからあなたはこれを行うことができます：

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

_var selectedText2 = $(this).val();
_

EDIT：value属性が空の場合、ほとんどのブラウザはコンテンツを値として使用するため、どちらの方法でも機能することに注意してください。 。

0
elclanrs

複数のドロップダウンからテキストを取得する

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

テキストに選択したテキストのリストが含まれるようになりました

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

これは私のために働いた、ここでは[0]の代わりに、ドロップダウンリストの選択されたインデックスを渡す。

0
Nirja Pathak

これを使ってください

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

次に、「selValue」と「selText」に警告してください。選択したドロップダウン値とテキストを取得します

0
Mohammed Shaheen MK