Question

有人可以帮助下面jquery行的javascript等价物。

$("#abc option[value='1']").text();

abc是selectbox的ID

Answer 1

var options = document.getElementById("abc").options;
for (var i = 0, j = options.length; i < j; i++) {
    if (options[i].value == "1") {
        alert(options[i].text);
    }
}

每个DOM级别2的HTMLOptionElement都有value和text个属性。

（demo）

<强>更新
结合文字的Updated demo，参见注释：

var options = document.getElementById("abc").options,
    text = "";

for (var i = 0, j = options.length; i < j; i++) {
    if (options[i].value == "1") {
        text += options[i].text;
    }
}

Answer 2

这将与选择器100％等效：

var options = document.getElementById('abc').getElementsByTagName('option'),
    text = "";

for(var i = 0, l = options.length; i < l; i++) {
    var option = options[i];
    if(option.value === '1') {
        text += option.text;
    }
}

或者querySelectorAll是否可用：

var options = document.querySelectorAll('#abc option[value="1"]'),
    text = "";
for(var i = 0, l = options.length; i < l; i++) {
    text += options[i].text;
}

也就是说，您可以根据HTML结构进行改进（例如，如果#abc是select元素等）。

Answer 3

声明没有意义。它从一个选项中获取文本，然后将其抛弃。我假设您想对文本执行某些操作，例如将其分配给变量。

// A variable for the result
var text = null;

// Get the options from the select element
var options = document.getElementById('abc').options;

// Find the option with the value "1"
for (var i = 0; i < options.length; i++) {
  if (options[i].value == '1') {
    // Get the text from the option
    text = options[i].text;
    // Exit from the loop
    break;
  }
}

注意：原始代码将从具有指定值的所有选项中获取文本，但此代码仅从找到的第一个选项中获取文本。拥有多个具有相同值的选项是没有用的，因此原始代码的功能很可能是无意的。

Answer 4

在现代浏览器中，它可以是：

var option = document.querySelector('#abc option[value="1"]').textContent

Answer 5

这将起作用。

document.querySelector(".producer option[value='1']").text;

javascript相当于jquery代码

5 个答案: