jquery - Jquery 从下拉列表中获取 SelectedText

Question

我正在尝试使用 Jquery 从下拉列表中获取选定的文本。

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

下面给出的是我正在使用的 Jquery。但这不起作用。我试过

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

并返回 [object object]。但是如何阅读选定的文本？

接下来我尝试了

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>

score 67 · Accepted Answer

我昨天遇到了同样的问题:-)

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

我还读到这很慢，如果您想经常使用它，您可能应该使用其他东西。

我不知道为什么你的不起作用，这个是给我的，也许其他人可以帮助......

score 10 · Accepted Answer

没有下拉 ID：

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

score 4 · Accepted Answer

今天，使用 jQuery，我这样做：

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

\#foo是下拉框id。

阅读更多。

score 3 · Accepted Answer

问题可能出在这一行：

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

它正在寻找 idSelectedCountryId被选中的项目，你真的想要在下 SelectedCountryId选择的选项，所以试试：

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

score 1 · Accepted Answer

首先像我在这里一样设置下拉列表的 id 属性，而不是使用该 id 在 jquery 或 javascrip 中获取值。

下拉列表：

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

jQuery：

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

score 1 · Accepted Answer

//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 · Accepted Answer

如果您使用<select>,事件$(this).val()内部change()返回当前选定选项的值。大多数时候使用text()是多余的，因为它通常与值相同，如果不同，您最终可能会在后端使用值而不是文本。所以你可以这样做：

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

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

编辑：请注意，如果您的value属性为空，大多数浏览器都将内容用作值，因此无论哪种方式都可以。

score 0 · Accepted Answer

从多个下拉列表中获取文本

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

texts 现在包含选定文本的列表

score 0 · Accepted Answer

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

这对我有用，在这里而不是[0]传递下拉列表的选定索引。

score 0 · Accepted Answer

请使用这个

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

然后请提醒“selValue”和“selText”。你得到你选择的下拉值和文本

score 0 · Accepted Answer

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

谢谢...：）

jquery - Jquery 从下拉列表中获取 SelectedText

11 回答 11

Related

Reference