Question

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

Answer 1

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

将该代码包装在document.ready handler：

中

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

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

Answer 2

将您的代码放入document.ready function

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

Answer 3

你必须为它包含一个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>

将选定值从下拉列表填充到文本框中

3 个答案: