Question

我正在尝试将jQuery代码转换为纯Javascript

$('.city option[value="NY"]').attr('selected','selected');

我该怎么办？我正在尝试以下代码，但它给了我一个错误

document.getElementsByClassName('.city option[value="NY"]')
    .setAttribute('selected','selected');

错误：

 document.getElementsByClassName(...).setAttribute is not a function

HTML：

 <select name="city" id="city" class="form-control">
    <option value="77">29 Palms</option>
    <option value="183">Acton</option>
    <option value="270">Adelanto</option>
    <option value="348">Agoura Hills</option>
    <option value="353">Agua Dulce</option>
    <option value="360">Aguanga</option>
    <option value="372">Ahwahnee</option>
    <option value="622">Alhambra</option></select>

Answer 1

注意：仅限IE8 +

在尝试查找具有类和属性选择器的元素时使用querySelector

var els = document.querySelector('.city option[value="NY"]');
if(els){
    els.setAttribute('selected','selected');
    //or els.selected = true;
}

getElementsByClassName()将类名作为参数，而不是像您使用的那样复杂的选择器，它还返回一个dom元素数组，因此您需要遍历数组内容然后设置其属性

var els = document.querySelector('select[name="city"] option[value="360"]');
if(els){
    els.selected = true;
}

演示：Fiddle

Answer 2

这个怎么样？

var cities = document.getElementsByClassName("city");
for (var i = 0; i < cities.length; i++){
    var options = this.getElementsByTagName("option");
    for (var i2 = 0; i < options.length; i2++){
        if (this.value == "NY"){
            this.setAttribute("selected", "selected")      
        }
    }
}

如何在不使用jQuery的情况下设置选择选项值？

2 个答案: