当前位置：文江博客话题详情

JavaScript jQuery OnChange

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

发布于 2024-11-06 14:56:49 字数 995 浏览 2 评论 0 原文

当使用 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的错误？

原文

I'm trying to update the text in a textbox when a value is selected from a dropdown form element using onchange().

This works fine in Firefox, Safari, Chrome but not in Internet Explorer.

Here's the stripped down code:

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

The current text is cleared as it should be but not updated with the new value.
Any ideas what's going on? Is this my error or IE's?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拥抱我好吗 2024-11-13 14:56:49

将您的代码更改为：

$(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 之类的代码（尽管它可能有效），但最好使事情保持一致。

Change your code to something like:

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

You are using jQuery already so make use of it's abilties to control the events of an element and write your code the jQuery way. Do not mix code such as onchange on this (although it may work) but it's better to make things consistent.

回复收藏 0 原文

春风十里 2024-11-13 14:56:49

我花了 5 分钟试图找出您的代码不起作用的原因，却发现您忘记了 OPTION 开始标记中的 = 字符。 Grrrrr...:)

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

在这里：

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

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

I've spent 5 minutes trying to figure out why your code doesn't work, only to find out you forgot the = character in your OPTION start tags. Grrrr.... :)

Replace <option value"01"> with <option value="01"> for every OPTION start tag.

Here you go:

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

Live demo: http://jsfiddle.net/ubrcq/

回复收藏 0 原文

折戟 2024-11-13 14:56:49

我不明白为什么您要将 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;

I don't see why you'd blank the value property and then immediately append more text using +=, you could achieve the same thing by simply setting the value property to this.value in one go.

Also, you are targeting the 'hours_text' element in 2 different ways:

document.getElementById('hours_text')

and

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

It would be a little bit cleaner to assign to a variable like so:

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

回复收藏 0 原文

￠好甜 2024-11-13 14:56:49

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

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

回复收藏 0 原文

~没有更多了~