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

我想一个jQuery代码转换为纯JavaScript如何在不使用jQuery的情况下设置选项值？

$('.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>

来源

2014-01-26 user2535089

几个问题与HTML ..选择元件不具有类city'的'，并且没有任何'与NY'的'值option'元件。 –

注：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

来源

2014-01-26 04:11:24

我尝试了两个。他们都不给出任何错误，他们既没有设置属性 – user2535089

@ user2535089它工作** [这里]（http://jsfiddle.net/n3mNx/）**也许HTML结构是错误的？ –

@ user2535089请分享您的html –

这个怎么样？

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

来源

2014-01-26 04:35:34 user3236668

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

回答

相关问题