如何在不使用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的情況下設置選項值？

回答

相關問題