3

我正在关注来自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>
4

3 回答 3

2

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

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

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

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

于 2012-06-06T04:50:24.343 回答
1

将您的代码放入 document.ready 函数中

 $(document).ready(function () {
  $('#hours').change(function() {
   $('#hours_text').val( $(this).val() );
 });​
});
于 2012-06-06T05:12:50.590 回答
0

你必须为它包含一个 jQuery

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type="text/css">

  </style>



<script type="text/javascript">//<![CDATA[ 
$(function(){
$('#hours').change(function() {
    $('#hours_text').val( this.value );
});
});//]]>  

</script>


</head>
<body cz-shortcut-listen="true">
  <select name="hours" id="hours" class="time">
    <option value="01" selected="">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>
于 2013-06-28T09:28:50.197 回答