Обновление текстового поля с выпадающим значением не работает в IE [JavaScript]

Question

Я пытаюсь обновить текст в текстовом поле, когда значение выбирается из выпадающего элемента формы с помощью onchange ().

Это отлично работает в Firefox, Safari, Chrome, но не в Internet Explorer.

Вот сокращенный код:

<script type="text/javascript">
$(document).ready(function(){
   document.forms['time_form'].elements['hours'].onchange = function(){
   document.getElementById('hours_text').value = '';     // Clear the current value
   document.forms['time_form'].elements['hours_text'].value += this.value;              
   };
});
</script>

<select name="hours" id="hours" class="time">
      <option value"01">01</option>
      <option value"02">02</option>
      <option value"03">03</option>
      <option value"04">04</option>
      <option value"05">05</option>
      <option value"06">06</option>
      etc...
</select>
<input type="text" id="hours_text" name="hours_text" value="01" />

Текущий текст очищается, как и должно быть, но не обновляется новым значением.Есть идеи, что происходит?Это моя ошибка или IE?

Answer 1

Измените свой код на что-то вроде:

$(document).ready(function(){
    // apply a change event
    $('#hours').change(function() {
        // update input box with the currently selected value
        $('#hours_text').val($(this).val());
    });
});

Вы уже используете jQuery, поэтому используйте его возможности для управления событиями элемента и написания своего кода способом jQuery.Не смешивайте такой код, как onchange, (хотя это может работать), но лучше сделать все согласованно.

Answer 2

Я потратил 5 минут, пытаясь выяснить, почему ваш код не работает, только чтобы узнать, что вы забыли символ = в стартовых тегах OPTION. Гррр .... :)

Заменить <option value"01"> на <option value="01"> для каждого начального тега OPTION.

Вот, пожалуйста,

$('#hours').change(function() {
    $('#hours_text').val( this.value );
});

Демонстрационная версия: http://jsfiddle.net/ubrcq/

Answer 3

function ChangeValue()
{
    $("#hours_text").val($("#hours").val());
}

<select name="hours" id="hours" class="time" onchange="ChangeValue()">
      <option value"01">01</option>
      <option value"02">02</option>
      <option value"03">03</option>
      <option value"04">04</option>
      <option value"05">05</option>
      <option value"06">06</option>
      etc...
</select>
< input type="text" id="hours_text" name="hours_text" value="01" />

Answer 4

Я не понимаю, почему вы бы очистили свойство value, а затем сразу добавили больше текста, используя +=, вы могли бы достичь того же, просто установив для свойства value значение this.value за один раз.

Кроме того, вы нацеливаетесь на элемент 'hours_text' двумя различными способами:

document.getElementById('hours_text')

и

document.forms['time_form'].elements['hours_text']

Было бы немного чище присвоить переменную следующим образом:

var hours_text = document.getElementById('hours_text');
hours_text.value = this.value;