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

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;
}

演示： 小提琴

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")      
        }
    }
}