對象HTMLSelectElement通過此關鍵字訪問值

以下代碼不打印該值。對象HTMLSelectElement通過此關鍵字訪問值

function go(x) 
{ 
    alert(x.options.selectedIndex.value); 
    //location=document.menu.student.options[document.menu.student.selectedIndex].value 
}

這是HTML代碼

<select name="student" onChange="go(this)"> 
    <option selected> Student </option> 
    <option value="http://www.cnet.com">Attendence</option> 
    <option value="http://www.abc.com">Exams</option> 
</select>

來源

2012-06-23 Abel Jojo

selectedIndex是一個數字，它不具有value財產。

如果你有select元件，它只是允許單選擇（如你所做的），以獲得其價值的最簡單的方法是select element's value property：

function go(x) { 
    alert(x.value); 
}

仔細檢查，它的工作原理上的瀏覽器你想要支持，但MaryAnne（查看評論）已經檢查了所有當前主流瀏覽器，並且我已經檢查過IE6，IE7和Firefox 3.6（例如，舊瀏覽器），並且它們都可以工作。因爲它是在DOM2 HTML規定（上面的鏈接）...

但重新selectedIndex，你可能是指：

function go(x) { 
    alert(x.options[x.selectedIndex].value); 
}

我可能把它遠一點和更防禦：

function go(x) { 
    var option = x.options[x.selectedIndex]; 
    if (option) { 
     alert(option.value); 
    } 
}

...或

function go(x) { 
    var option = x.options[x.selectedIndex]; 
    var value = option && option.value; 
    alert(value); // Alerts "undefined" if nothing is selected 
}

...的情況下，不存在選擇的選項（在這種情況下，option將爲undefined），但使用您的特定標記和代碼，我不知道用戶代理的change事件將被觸發而沒有任何選擇。至少，我不這麼認爲 —「我認爲」是防守的原因。 :-)

來源

2012-06-23 16:27:22

一個簡短的方法'alert（x.value）;'[在這種情況下工作]（http://jsfiddle.net/bTMyr/），我在所有主流瀏覽器中都試過。會不會有這種「捷徑」是一個壞主意的情況？ –

@MaryAnne：只要你在你的目標瀏覽器中試用它，它很有用。令我驚訝的是，'HTMLSelectElement＃value' [**在DOM2 HTML中定義了**]（http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59351919）和似乎在IE7上工作，所以如果你已經在當前主要的瀏覽器上進行了測試，這意味着非常廣泛的支持。顯然只與單選「select」元素有關，但這些是絕大多數。如果我是你，我會將其作爲答案張貼。如果你不這樣做，我會把它添加到上面，但真的是你的答案。 –

我見過這兩種方法（通過'x.options [x.selectedIndex]'和直接''x.value'），但不太確定'x.value'在任何地方都是有效的，而且我沒有測試過東西如IE 6或Safari。它讓我確信W3C定義了'x.value'。如果您願意，請將此方法添加到您的答案中，我認爲這比在兩個地方分割信息要好。 –

對象HTMLSelectElement通過此關鍵字訪問值

回答

相關問題