jQuery代码的JavaScript等效物

Question

有人可以帮助什么是下面的jQuery线的JavaScript等价物。

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

ABC是选择框的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); 
    } 
} 

的value和text属性都可以在每HTMLOptionElement DOM级别2.

（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是选择元素等）。

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;