使用下拉值更新文本框在 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 开始标记中的 = 字符。 Grrrrr...:)

将 替换为 每个选项开始标记。

在这里：

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

现场演示： http://jsfiddle.net/ubrcq/

Answer 3

我不明白为什么您要将 value 属性留空，然后立即使用 += 附加更多文本，您只需将 value 属性设置为即可实现相同的效果this.value 一次性完成。

此外，您还可以通过两种不同的方式定位“hours_text”元素：

document.getElementById('hours_text')

和

document.forms['time_form'].elements['hours_text']< /code>

像这样分配给变量会更干净一点：

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

Answer 4

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" />