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上混合{{1}}这样的代码（尽管它可能有用），但最好使事情保持一致。

Answer 2

我花了5分钟时间试图弄清楚你的代码无效的原因，但却发现你忘记了OPTION开始标记中的=字符。 Grrrr .... :)

为每个OPTION开始代码替换<option value"01">和<option value="01">。

你走了：

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

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

Answer 3

我不明白为什么你要删除value属性，然后使用+=立即添加更多文本，只需将value属性设置为{{1}即可实现同样的功能一气呵成。

此外，您还以两种不同的方式定位'hours_text'元素：

this.value

和

document.getElementById('hours_text')

分配给这样的变量会有点干净：

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

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

使用下拉值更新文本框在IE [JavaScript]中不起作用

4 个答案: