如何通過選擇到HTML選擇

Question

我想這取決於所選擇<option>元素不同的行爲：

<select name="colorSelector" onchange="handleColorChange();"> 
    <option value="">- select -</option> 
    <option value="1">Red</option> 
    <option value="2">Blue</option> 
</select> 

function handleColorChange() { 
    // Behave different depending on which <option> was just selected 
} 

什麼我需要傳遞到handleColorChange()方法從onchange監聽器裏才能做到這一點？

Answer 1

貌似沒有人提到switch呢。另外，不要把這個函數放在HTML中，那太糟糕了。這是正確的方式：

document.getElementsByName('colorSelector')[ 0 ].onchange = function () { 
    switch (this.options[ this.selectedIndex ].value) { 
     case '1': 
      // Do something when "Red" is selected 
      break 
     case '2': 
      // Do something when "Blue" is selected 
      break 
    } 
} 

Answer 2

你沒有傳遞什麼功能，只是分配一個ID選擇：

<select id="mySelect" name="colorSelector" onchange="handleColorChange();"> 
    <option value="">- select -</option> 
    <option value="1">Red</option> 
    <option value="2">Blue</option> 
</select> 

function handleColorChange() { 
var x=document.getElementById("mySelect").selectedIndex; 
var y=document.getElementById("mySelect").options; 
alert("Index: " + y[x].index + " is " + y[x].text); 
} 

，或者如果你想通過名稱來獲得，然後做在你的函數：

var x=document.getElementsByName("colorSelector")[0].selectedIndex; 
var y=document.getElementsByName("colorSelector")[0].options; 
alert("Index: " + y[x].index + " is " + y[x].text); 

Answer 3

使用this

<select name="colorSelector" onchange="handleColorChange(this);"> 
    <option value="">- select -</option> 
    <option value="1">Red</option> 
    <option value="2">Blue</option> 
</select> 

function handleColorChange(element) { 
    // Behave different depending on which <option> was just selected 
} 

Answer 4

嘗試

function handleColorChange(self) 
{ 
    console.log(self.selectedIndex); 
    console.log(self.options[self.selectedIndex].text); 
    console.log(self.options[self.selectedIndex].value) 
}; 

而在HTML代碼

<select id="mySelect" name="colorSelector" onchange="handleColorChange(this);"> 

Answer 5

<select name="colorSelector" onchange="handleColorChange(this);"> 
    <option value="">- select -</option> 
    <option value="1">Red</option> 
    <option value="2">Blue</option> 
</select>​ 


function handleColorChange(obj) { 
    alert(obj.options[obj.selectedIndex].value); 
}​ 

的jsfiddle here