Javascript：下拉列表，获取第一个元素值，如？

给定包含未知数量选项元素的下拉列表：

<select id="ddlDropDown">
    <option value="text1">Some text</option>
    <option value="text2">Some text</option>
    <option value="text3">Some text</option>
    ...
    <option value="textN">Some text</option>

我如何使用纯javascript获得与文本框中的文本匹配的第一个选项，而不遍历整个集合

也就是说，假设我有500个下拉选项元素，其随机值介于500和1500之间，我如何获取并选择列表中的第一个选项，而不是为了匹配用户迄今为止键入的内容

因此，如果它们是三项：下拉列表中的1030、1012和1013以及用户类型：

选择1:1030

10:1030仍处于选中状态

选择101:1012

选择1013:1013

澄清：在不迭代集合的情况下，与jquery的^=运算符类似，我将使用stringindexOf方法来确定是否存在匹配项

function selectDDL() {
    var txtElem = document.getElementById("txtTextBox");
    var ddlElem = document.getElementById("ddlDropDown");

    var typedText = txtElem.value;
    var options = document.querySelectorAll("#ddlDropDown option");
    var matches = [];
    for (var i = 0; i < 3; i++) {
        if (options[i].innerHTML.indexOf(typedText) == 0) {
            matches.push(options[i]);
        }
    }
    matches[0].setAttribute("selected", "selected");

}

---

可以使用“从属性开始”选择器。代码的唯一问题是我没有从选择器中转义任何特殊字符。因此，如果用户进入，它将爆炸

document.querySelectorx.addEventListenerkeyup，函数{ //代码以筛选出选项 var txt=此值； var opts=document.queryselectorallddl下拉选项[value^='+txt+']； //显示演示选项的代码 var out=Array.prototype.slice.call opts.mapfunction x{return x.value}； document.querySelectorp.innerHTML=out.join； }; 一些文本 一些文本 一些文本 一些文本 一些文本 一些文本

---

您不需要jQuery来使用^=，只需与以下命令一起使用即可：

var text=document.querySelectorAll[value^='text']； 控制台。日志文本； 一些文本 一些文本 一些文本 一些文本 123456

---

依赖具有[value^=…]的选择器的人将通过其value属性而不是文本来查找选项。 没有CSS选择器可以根据文本选择选项。jQuery支持has和contains，但使用迭代来实现这些特性

这只是一个有趣的选择，但可能不可取：innerHTML速度很慢，如果select标记中包含选项以外的其他标记，则会出现错误：

var html = ddlElem.innerHTML; 
var idx = html.indexOf('>'+typedText);
ddlElem.selectedIndex = idx === -1
    ? -1
    : html.substr(0, idx).match(/\<option/g).length - 1;

---

那么你想要单品退货？没错。我希望选项列表中的第一项与用户键入的文本匹配。我假设有一个string.contains或类似的字符串，它将获取第一个字符串，而不严格要求必须匹配所有-只匹配第一个。查看str.indexOf的工作原理。您可以使用它来遍历字符串，直到找到一个包含您要查找的内容的字符串。这就是问题所在。我想这样做，而不是重复整个事情。如果我能够访问jqueryAnd而不迭代整个集合，这将是一项极其简单的任务？不必使用jQueryYou迭代无法使用筛选器遍历集合，因为它不是数组You可以将其转换为数组。看看我代码中的地图线。戴夫的答案正是我想要的。querySelectorAll和在没有jquery的情况下使用^=的能力是我所缺少的两项知识。我使用querySelectorAll和没有jquery。要求说根本没有jquery。现在它没有jquery，代码基本上是完全相同的代码，减去jquery语法。这正是我所寻找的。谢谢。@MetalPhoenix供您参考：您注意到我回答中的注释了吗？您需要转义特殊字符，或者您的用户将生成错误？我可以尝试捕获所有错误，而不会出现问题。下拉选项中的所有值都是数字。如果他们键入其他内容，那就是他们的问题：但这是我将来会记住的。谢谢。这实际上没关系，因为简单地说，每个选项的值都是用户知道的客户ID。所以按标记属性搜索就可以了。然而，如果我需要通过文本进行搜索，我必须说innerHTML是我需要使用的替代方法。谢天谢地，情况并非如此。

function selectDDL() {
    var txtElem = document.getElementById("txtTextBox");
    var ddlElem = document.getElementById("ddlDropDown");

    var typedText = txtElem.value;
    var options = document.querySelectorAll("#ddlDropDown option");
    var matches = [];
    for (var i = 0; i < 3; i++) {
        if (options[i].innerHTML.indexOf(typedText) == 0) {
            matches.push(options[i]);
        }
    }
    matches[0].setAttribute("selected", "selected");

}

var html = ddlElem.innerHTML; 
var idx = html.indexOf('>'+typedText);
ddlElem.selectedIndex = idx === -1
    ? -1
    : html.substr(0, idx).match(/\<option/g).length - 1;