2014-02-12 2 views
0

Мои функции SelectBeatle проверки input#FindBeatle и устанавливает selectedIndex от select#Beatles к значению input#FindBeatle

Однако, по какой-то причине, кажется, как будто мой цикл не будет работать:
http://jsfiddle.net/js_test/M9ty7/

Am I что-то не хватает?Петля для определения selectedIndex не работает?



Вот HTML:

<input id="FindBeatle" type="text" /> 

<select id="Beatles"> 
    <option>John</option> 
    <option>Paul</option> 
    <option>George</option> 
    <option>Ringo</option> 
</select> 

<input type="button" onclick="SelectBeatle()" value="Submit" /> 

и вот мой JS:

var SelectBeatle = function(){ 
    var sel = document.getElementById('Beatles'), 
     val = document.getElementById('FindBeatle').value; 

     for(var i = 0, j = sel.options.length; i < j; i++) { 
      if(sel.options[i].innerHTML === val) { 
       sel.selectedIndex = i; 
       break; 
      }else{ 
       alert("Try Again!"); 
      } 
     } 
}; 
+0

Что такое значение 'i' в этой точке вашего кода' txt = sel.options [i] .innerHTML'? – Xotic750

+0

Спасибо @ Xotic750 Я отредактировал свой вопрос, а также мою jsfiddle, чтобы отразить вашу рекомендацию. Однако он все еще не работает. – Wilhelm

+0

Установите 'no wrap - в ' на ваш jsFiddle. Второй вариант раскрывающегося списка. – Xotic750

ответ

1

ну, консоль сказала, что SelectBeatle не определена ... поэтому ваша функция, вероятно, не видна в области html при нажатии кнопки ,

Когда вы говорите var, в js, этот var существует только внутри текущей области. JSFiddle добавляет оболочку функции в свой javascript, ограничивая область действия.

Конечно лучший вариант, чтобы захватить событие нажатия кнопки:

var btn = document.getElementById('submit'); 
btn.addEventListener('click',function(event){ 
    SelectBeatle(); 
}); 

Вот скрипка: http://jsfiddle.net/M9ty7/15/

+0

Обновленный ответ на решение для чистых – SparK

+0

Я согласен с ответом, поскольку это улучшение на исходный код и работает, несмотря на непостоянство jsfiddle. Спасибо за головы, я почти пропустил это. – Wilhelm

+0

Я пересматривал ваш ответ и имел два быстрых вопроса: ** No.1 - ** Я заметил, что вы заменили 'sel.selectedIndex = i;' и 'break;' в моем условном выражении 'continue;'. Почему это? Правильно ли я предполагаю, что 'continue 'выкинет вас из цикла, как только закончится итерация, без выполнения кода в конце? ** No.2 - ** Почему «возвращение» в конце? Что это значит 'return'ing, если нечего« ​​возвращать »? – Wilhelm

2

Ваш JS нарушает, когда вы установите начальное txt значение.

txt = sel.options[i].innerHTML;

i еще не существует

+0

Спасибо, я отредактировал свой вопрос, а также мою jsfiddle, чтобы отразить вашу рекомендацию. Однако он все еще не работает. – Wilhelm

+0

Работает для меня, вам нужно изменить, как jsfiddle загружает скрипт, но код работает нормально: http://jsfiddle.net/M9ty7/11/ – helion3

+0

[in meta] Я хотел бы, чтобы был способ принять ответы в виде шагов. видя, что это шаг 1, чтобы исправить код, и принятый ответ - это шаг 2 ... – SparK

-1
$('#FindBeatle').val($('#Beatles').val()); 

ИЛИ

$('#FindBeatle').val($('#Beatles :selected').text()); 
0

Выньте вар до вашего определения функции. По крайней мере, в jsfiddle это приведет к тому, что ваше определение функции не будет доступно вашей кнопке.

+1

вы были быстрее меня: D и вы правы – SparK

+0

Так оно и было. Знаете ли вы, какие причины причуды? – Wilhelm

+0

Эта область, когда вы говорите 'var', в js, что var существует только внутри текущей области. JSFiddle добавляет оболочку функции в свой javascript, ограничивая область действия. Однако лучший вариант - не использовать 'onclick =" "' вообще, использовать jquery! – SparK

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