使用Ajax / JQuery的PHP动态下拉列表无效 - 是复制代码

时间:2017-07-19 15:55:36

标签: javascript php jquery html ajax

我有两个下拉列表,第二个下拉列表中的数据取决于第一个下拉列表中选择的内容。我使用Ajax / JQuery,如果我注释掉包含我网站上每个页面边栏的网站模板代码的包含文件,它就可以正常工作。但是,在代码中包含该文件,它不起作用。它没有填充第二个下拉列表,而是有一个空列表。当我使用浏览器的开发工具检查元素时,头标记中的代码将被复制,而不是填充列表选项的代码。所以我想我的问题是HTML,PHP和Ajax / JQuery之间是否存在潜在的冲突?我还应该注意,即使我将所有HTML放在文件中而不是为sidbar调用包含库,它仍然以相同的方式运行。

这是ajax2.js ......



    $(document).ready(function() {
      $("#country").change(function() {
        var country_id = $(this).val();
        if(country_id != "") {      $.ajax({
            type:"POST",
            url:"sample.php",
            data:{c_id:country_id},
            success:function(response) {
              var resp = $.trim(response);
              $("#state").html(resp);
            }
          });
        } else {
          $("#state").html("<option value=''>------- Select --------</option>");
        }
      });
    });
&#13;
&#13;
&#13;

以下是head标签的Ajax / JQuery源文件......

&#13;
&#13;
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax2.js"></script>
&#13;
&#13;
&#13;

最后,这里是包含两个下拉列表的代码的HTML(sample.php)......

&#13;
&#13;
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<title>Sample</title>
<link href="../../sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax2.js"></script>
</head>

<body>

<?php include("../includes/sidebar.php"); ?><?php



//MySql DB Info

include("../includes/db_connect7.php");

if (isset($_POST['c_id'])) { 
	
	$title = mysql_real_escape_string($_POST['c_id']);
	 echo "title = $title";
	  $sql = "select * from TW_Picks where title='$title'";
	  $res = mysql_query($sql);
	  if(mysql_num_rows($res) > 0) {
	    echo "<option value=''>------- Select --------</option>";
	    while($row = mysql_fetch_assoc($res)) {
	      echo "<option value=\"$row[name]\">$row[pick]</option>";
	    }
	  }


} else {
	
	?>

	<div align="center">
		<font face="Verdana, Arial, Helvetica, sans-serif" size="5"><strong>SAMPLE</strong></font> </div>
	<p>&nbsp; </p>
	<center>
	<form action="<?php echo $PHP_SELF ?>" method="post">
		<br><br>
		<select name="country" id="country">
			<option>Select Fed</option>
			<option value="USA">USA</option>
			<option value="CAN">CAN</option>
			<option value="MEX">MEX</option>
		</select>
		<br><br>
		<select name="state" id="state">
			<option>Select Title</option>
		</select>
		<br><br>		<br><br><br>
		<input name="addnew" type="submit" value="Add New">
		<br><br>
	</form>
	</center>
	<?php 
		
} ?>

	<br><br><br><br><br><br><br>
<p>&nbsp;</p>

</body>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

sample.php文件也是includes头文件。当您使用jQuery获取sample.php时,它也会发回标头代码。使您的sample.php文件仅返回所需的HTML。

if (isset($_POST['c_id'])) { 
  // what you are doing here should work okay
} else {
    // Put the includes here
    include("../includes/sidebar.php");
}