Jquery 从下拉列表中获取 SelectedText

Posted 2023-02-22

【中文标题】Jquery 从下拉列表中获取 SelectedText

【英文标题】：Jquery to get SelectedText from dropdown

【发布时间】：2012-05-04 14:33:05

【问题描述】：

我正在尝试使用 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>

【问题讨论】：

可能的欺骗：***.com/questions/196684

you selected :" + selectedText1 + selectedText2?据我所知，您只能选择一个带有select 标签的选项！

【参考方案1】：

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

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

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

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

【讨论】：

$("#SelectedCountryId option:selected").text() 对我不起作用。它只是返回空

@Millar：你确定你没有其他问题吗？你能发布你的html输出吗？

你改变了值;-)？您是否尝试过连续多次更改它。您可以尝试在第一个选项中添加空字符串以外的值。在我看来，您总是选择第一个...

我可以使用 var selectedID = $("#SelectedCountryId").val(); 读取所选值我可以根据我的选择看到差异值。但我没有找到获取所选文本的方法

我试过这个代码：<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> <script> $("#SelectedCountryId").change(function () var selectedText2 = $("#SelectedCountryId option:selected").text(); alert("You selected :" + selectedText2 ); ); </script> 这对我来说非常适合 jquery-1.7.1 -- 抱歉，换行符被删除了 :-(

【参考方案2】：

没有下拉 ID：

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

【参考方案3】：

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

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

\#foo是下拉框id。 阅读more。

【讨论】：

应该把这段代码保存在 $(document).ready(function () );

【参考方案4】：

问题可能出在这一行：

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

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

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

【讨论】：

我试过 $('#SelectedCountryId option:Selected').text() 但它返回空

我想我不小心把selected大写了

【参考方案5】：

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

下拉列表：

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

jquery：

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

【参考方案6】：

//Code to Retrieve Text from the Dropdownlist 

$('#selectOptions').change(function()

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

【参考方案7】：

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

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

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

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

【参考方案8】：

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

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

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

【参考方案9】：

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

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

【参考方案10】：

请使用这个

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

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

【参考方案11】：

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

谢谢...:)