2013-12-16 5 views
1

Я пытаюсь сделать так, чтобы при выборе из моего выпадающего меню текст будет отображаться соответственно внутри моего текстового поля, пока я пытался просто заставить одного из них работать.onchange не работает для выпадающего меню?

ПРОБЛЕМА: он не отображает строку из массива внутри текстового поля. Проблема в этом коде?

Выпадающее меню:

<select id="dropdown" onchange="getFrames();"> 
    <option value="1" selected="selected"> Blank </option> 
    <option value="2"> Exercise </option> 
    <option value="3"> Juggler </option> 
    <option value="4"> Bike </option> 
    <option value="5"> Dive </option> 
</select> 

текстовое поле:

<textarea id="textstage" rows="80" cols="20"> </textarea> 

JavaScript:

У меня есть эти глобальные переменные.

var theStage = document.getElementById("textstage"); 
var getDrop = document.getElementById("dropdown"); 

, а затем у меня есть эта функция.

function getFrames(){ 
    var dropSel = getDrop.options[getDrop.selectedIndex].value; 

    if(dropSel === 2){ 
     theStage.value = ANIMATIONS["Exercise"]; 
} 

Массив, на который делается ссылка, является глобальным массивом из другого js-файла.

+0

Является ли управление доступом к методу getFrames? Я имею в виду, вы пытались поставить предупреждение в этот метод и проверить, вызвано ли событие? –

+0

hm, позвольте мне попробовать. – Corjava

+0

Когда я реализую предупреждение в том же разделе, как если бы (dropSel === 2) {предупреждение не появляется, когда я изменяю выбранный параметр для упражнения в раскрывающемся меню. – Corjava

ответ

3

Try:

var theStage,getDrop; 

function getFrames() { 
    var dropSel = getDrop.options[getDrop.selectedIndex].innerHTML;//+getDrop.value; 
    theStage.value = ANIMATIONS[dropSel]; 

} 

//Place the selection part on load callback 
window.onload = function() { 
    theStage = document.getElementById("textstage"); 
    getDrop = document.getElementById("dropdown"); 
} 

Demo

  • Вы можете просто использовать getDrop.value а не делать getDrop.options[getDrop.selectedIndex].value.
  • === строгое сравнение равенства означает «2» === 2 будет ложным, как в вашем случае.
  • Похоже, что вы ищете текст опции, чтобы найти значение, основанное на этом как ключевое слово в объекте Animation. Таким образом, вы можете просто сделать getDrop.options[getDrop.selectedIndex].innerHTML
  • Ваш документ код выбора должен быть внутри window.onload или после элемента в HTML
0

я сделал небольшие изменения в вашем HTML, опуская встроенный обработчик событий, и вместо этого добавил это к javascript.

HTML:

<select id="dropdown"> 
    <option value="1" selected="selected"> Blank </option> 
    <option value="2"> Exercise </option> 
    <option value="3"> Juggler </option> 
    <option value="4"> Bike </option> 
    <option value="5"> Dive </option> 
</select> 
<textarea id="textstage" rows="80" cols="20"> </textarea> 

Кроме того, в JavaScript, я забирал строгого равенства (===) и сделал это просто (==).

JavaScript:

var theStage = document.getElementById("textstage"); 
var getDrop = document.getElementById("dropdown"); 
getDrop.addEventListener("change",getFrames); 
function getFrames(){ 
    var dropSel = getDrop.options[getDrop.selectedIndex].value; 
    if(dropSel == 2){ 
     theStage.value = ANIMATIONS["Exercise"]; 
    } 
} 

Надеюсь, это должно работать для вас.

Смежные вопросы