如何找到给定文本的下拉列表的索引

How to find the index of a dropdown for the given text

本文关键字：下拉列表 索引 文本 何找      更新时间：2023-09-26

如何使用jQuery找到给定值的下拉列表的索引?

这是我的下拉菜单，有三个值:

    管理>
  1. 直达
    2. 员工

我可以得到所选值的索引如下

var index = $("#mydropdown").find("option:selected").val();

但是我需要知道manager的索引通过将manager作为参数传递给jQuery函数来获取索引

我试过了，但是没有用

var index = $("#mydropdown").find("manager").val();

我想你需要这样的东西:

js 

$("select option[value='manager']").index()


<select>
    <option value="admin">admin</option>
    <option value="manager">mananger</option>
    <option value="employee">employee</option>
</select>

小提琴

您可以使用:contains或.filter()。我个人更喜欢.filter():

var index = $("#mydropdown").find(":contains(manager)").val();
//Or
var index = $("#mydropdown").filter(function(){
    return $.trim($(this).text()) === "manager";
}).val();

假设你的下拉菜单是这样的:

<select>
    <option value="1">admin</option>
    <option value="2">manager</option>
    <option value="3">employee</option>
</select>

注意:如果您需要强制用户进行选择，请使用空选项，然后让代码分别检查值='0'或索引为零。为了达到这个目的，我在下面的两个实现中都添加了一个空选项

实现# 1:

function optionchanged()
{
    var i = $("#option1").val();
    var t = $("#option1 option:selected").text();
    console.log("The Index of option selected is: " + i);
    console.log("The Text of option selected is: " + t);
}

在每个选项中为value属性分配索引，可以更好地控制返回的值。

<select id="option1" onchange="optionchanged();">
    <option value="0"></option>  
    <option value="1">Admin</option>
    <option value="2">Manager</option>
    <option value="3">Employee</option>
</select>

控制台输出如下所示:

选择'Admin'产生:
所选选项的索引为:1
所选选项的文本为:Admin

选择'Employee'产生:
所选选项的索引为:3
选择的选项文本为:Employee

实现# 2:

如果你不想添加索引值，你可以直接在jQuery中引用索引，像这样:

function optionchanged()
{
    //var i = $("#option1 ").val();
    var i = $("#option1 option:selected").index();
    var t = $("#option1 option:selected").text();
    console.log("The Index of option selected is: " + i);
    console.log("The Text of option selected is: " + t);
    //alert("Value of option 1 is: " + index);
}

<select id="option1" onchange="optionchanged();">
    <option></option>
    <option>Admin</option>
    <option>Manager</option>
    <option>Employee</option>
</select>

控制台输出将与上面相同。

相关文章：