Question

下面是我的代码。

首先，运行index.php，然后将显示一个下拉列表，需要从下拉列表中选择一个值。到目前为止，下拉列表将显示值1或2。如果选择2，它将显示已选择的值以及从display-date.php和“ date”字段调用的“ date”字段，您可以选择日历中使用datepicker插件调用的日期。

现在..问题是...我已经从日历中选择了日期，但是所选的日期没有出现在日期输入字段中。我在哪里错了？

希望任何人都可以帮助我... :)

谢谢。

这是index.php

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
  </head>
  <body>
    <script>
      function getData(str){
          var xhr = false;
          if (window.XMLHttpRequest) {
              // IE7+, Firefox, Chrome, Opera, Safari
              xhr = new XMLHttpRequest();
          } 
           else {
              // IE5/IE6
              xhr = new ActiveXObject("Microsoft.XMLHTTP");
           }
           if (xhr) {
               xhr.onreadystatechange = function () {
                  if (xhr.readyState == 4 && xhr.status == 200) {
                       document.getElementById("results").innerHTML = xhr.responseText;
                   }
                }
                xhr.open("GET", "display-date.php?q="+str, true);
                xhr.send(null);
            }
       }
     </script>
     <div>
      <?php
         echo '<select title="Select one" name="selectcat" onChange="getData(this.value)">';        
         echo '<option value="None">-- Select Option --</option>';
         echo '<option value="1">One</option>';
         echo '<option value="2">Two</option>';
         echo '</select>';
       ?>
      </div>
      <br/><br/>
      <p>You selected: <span id="results"></span></p>
  </body>
</html>

这里是display-date.php

<?php
$Q = $_GET["q"];
echo $Q;
?>

<?php
if ($Q ==  '2'){
?>

<html>
<head>
    <style>
         #date_input{
            text-indent: -500px;
            height:25px; 
            width:200px;
        }
    </style>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
    <input id ="date_input" dateformat="dd-M-yy" type="date"/>
    <span class="datepicker_label" style="pointer-events: none;"></span>

    <script type="text/javascript">
        $("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", 
top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : 
($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });
    </script>
</body>

</html>

<?php
}
?>

Answer 1

修改 display-date.php 。不再需要HTML基本结构。

64: error: no suitable method found for setText(String[])

Answer 2

您无需使用ajax，一定不能以您在问题中显示的方式使用Ajax。
Ajax不用于在DOM中绘制html
不需要使用ActiveXObject，这是不安全的，我不认为我们在现代开发中仍然应该支持IE 5或IE 6。
如果您需要使用ajax，请使用JQuery的ajax函数而不是XMLHttpRequest，正如我所看到的，您已经在使用它。

这是无需ajax就能正常工作的代码。

function getData(str){
  $('.showInput').hide();
  $('.showText').text('');
  if(str != ""){

    str = parseInt($.trim(str));

    if(str == 2){
      $('.showInput').show();
    }else{
      $('.showText').text(str);
    }
  }

}

$(document).ready(function(){
  $("#date_input").datepicker({ dateFormat: 'dd-M-yy' });
});

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  </head>
  <body>
    
	 <style>
		.showInput{
			display:none;
		}
	 </style>
     <div>
     
        <select title="Select one" name="selectcat" onChange="getData(this.value)">
			<option value="">-- Select Option --</option>
			<option value="1">One</option>
			<option value="2">Two</option>
        </select>
       
      </div>
      <br/><br/>
      <p>You selected: <span id="results">
		<span class="showText"></span>
		<span class="showInput">
			<input id="date_input" dateformat="dd-M-yy" type="text"/>
		</span>
	</p>
	
  </body>
</html>

为什么我的代码在选择后没有在输入字段中显示日期（dd-M-yy格式）？

2 个答案: