javascript - 将下拉列表中的选定值填充到文本框中

标签 javascript

我正在关注 http://jsfiddle.net/ubrcq/ 中的示例
但我似乎无法得到它。下面是我的代码

<html>
<head>
 <script type="text/javascript">

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

</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>

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

<input type="text" id="hours_text" name="hours_text" value="01">

 </body>
</html>

最佳答案

您的问题是您的脚本位于文档的 header 部分,并且在 dom 准备就绪之前正在运行。结果,$('#hours') 没有选择任何内容,因此没有连接任何事件处理程序。

将该代码包装在 document.ready 处理程序中:

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

或者,您可以将整个脚本移动到文档正文的最后,使其在处理正文并可用后进行解析。

关于javascript - 将下拉列表中的选定值填充到文本框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10908310/

相关文章:

javascript - 视差 - 让文本以 1/10 的速度滚动

javascript - 向 Angular 对象添加属性

javascript - 如何将使用 ngfor 打印的数据拆分为 3 列?

javascript - Nodejs 向 http 服务器发送命令以突出显示 DOM 元素或为其着色

javascript - localStorage 中的 Angular 缓存

javascript - 发出 HTTPs 请求时出现 "Error: getaddrinfo ENOTFOUND"错误

javascript - 切换 JavaScript 代码在 IE11 中不起作用

javascript - 了解 Webpack 输出

javascript - 我真的应该在使用它们之前在 Javascript 中声明所有变量吗?

javascript - Equal Columns JS 忽略内容