this.value появляется как undefind, когда функция вызывается из события onchange

Question

<select id="dropdown1" name="dropdown1" onchange="dropdown1_onchange();"> 
     <option selected value=""> Select</option> 
     <option value="value1">value1</option> 
     <option value="value2">value2</option> 
     <option value="value3">value3</option> 
</select> 


function dropdown1_onchange() 
{ 
    alert(this.value); 
} 

Javascript вызывается, но this.value не отображается. Я знаю, что могу использовать

$ («dropdown1») значение

, но я пытаюсь понять, почему this иногда представляет текущий объект и другие времена -. Окно. Обычно, когда я использую встроенный Javascript this является представление текущего объекта ...

Answer 1

Вы проблемы в том, что this внутри функции dropdown1_onchange относится к window. Вы можете использовать аргумент для извлечения значения.

function dropdown1_onchange(elem) 
{ 
    alert(elem.value); 
} 

Answer 2

Нельзя использовать встроенный javascript. Измените код, чтобы использовать обработчик событий, как следующее:

<select id="dropdown1" name="dropdown1"> 
     <option selected value=""> Select</option> 
     <option value="value1">value1</option> 
     <option value="value2">value2</option> 
     <option value="value3">value3</option> 
</select> 
<script> 
document.getElementById('dropdown1').addEventListener('click', dropdown1_onchange); 
function dropdown1_onchange(event) 
{ 
    alert(event.target.value); 
} 
</script> 

Answer 3

Вы можете использовать эту функцию:

function dropdown1_onchange(el) { 

    if (el.selectedIndex <= 0) 
     return null; 

    alert(el.options[el.selectedIndex].value); 

} 

JS Bin here.

Answer 4

Вы можете подключиться к событию onchange выбранного элемента 2 способами.

Inline Ввод кода обработчика события в атрибуты Select elements onchange = "". Это становится всей функцией обработчика событий. не Это в основном завернутые с вызовом функции

<select id="dopdown1" onchange="dropdown1_change"> 
</select> 

// EXAMPLE FUNCTION OF WHAT HAPPENS BEHIND THE SCENES. 
// This function exists in the browers/javascript framework. 
// Your code will be executed inside its context. 
function sudo_eventhandler(event) 
{ 
    // Whatever is inside your onchange="" attribute 
    dropdown1_change(this); 
} 

function dropdown1_change(element) 
{ 
    alert(element.value); 
} 

Таким образом, вы должны будете пройти this или любые другие свойства любым способом, который вы называете вне этой функции, как this больше не является элементом.

Обработчик событий Вы можете подключить свой собственный обработчик событий к элементу, выбрав его в javascript.

document.getElementById('dropdown1').addEventListener('click', dropdown1_onchange); 

function dropdown1_change() 
{ 
    alert(this.value); 
} 

Это делает обработчик событий фактическим обработчиком, а не только методом, вызванным изнутри обработанного события. Таким образом, this теперь является элементом, который вы ожидаете, поскольку элемент по существу вызывает метод, а не окно.