javascript - 如何在不使用 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;
}

演示:Fiddle