Question

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

这是我的下拉列表，其中包含三个值：

管理员
mananger
雇员

我能够获得所选值的索引，如下所示

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

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

我试过这样但是它不能正常工作

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

Answer 1

我认为你需要这样的东西：

<强> JS

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

<强> HTML

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

fiddle

Answer 2

您可以使用: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>

Answer 3

注意：如果您需要强制用户进行选择，请使用空选项，然后让代码分别检查值='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>

控制台输出如下所示：

选择“管理员”会产生：
选择的选项索引是：1
选择的文本选项为：管理员

选择“员工”产生：
选择的选项索引是：3
选择的文本选项为：员工

实施＃2：

如果您不想将索引添加到value，可以直接在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>

控制台输出与上面的内容相同。

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

3 个答案: