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

Question

I am trying to convert a jQuery code into pure Javascript

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

How can I do it? I am trying the following code but it gives me an error

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

Error:

 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

Note: IE8+ only

Use querySelector as you are trying to find an element with a class and attribute selectors

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

getElementsByClassName() takes a class name as the argument, not a complex selector like the one you have used, also it returns an array of dom elements, so you need to iterate through the array contents and then set its property

---

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

Demo: Fiddle

Answer 2

What about this?

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