javascript - Mysql 根据另一个下拉选项填充下拉列表

Question

我已经为此测试了很多代码，但我无法让它工作。 我想根据另一个下拉列表的值填充一个下拉列表。 编辑: 我的表名称是 zipcode，我有 CITY、STATE、Zipcode、FULLSTATE 和 zipID STATE是FULLSTATE的缩写

我有: 邮政编码:php

<?php
/* Template Name: Zipcode Help */
?>
<?php get_header(); ?>
<?php
global $wpdb;
$query = "SELECT * FROM zipcode group by FULLSTATE";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_assoc($result))
{
$dd .= "<option value='".$row['STATE']."'>".$row['FULLSTATE']."</option>";
} 
?>
<select name="dropdown1" id="dropdown1" onchange="populatelist">
<option value="empty" selected>--Select State--</option>
<?php echo $dd; ?>
</select>
<select id="city" name="city">
<option value="empty">&nbsp;</option>
</select>
<!--content of the page-->
<div class="container-wrapper clearfix" id="main-content-container">
<div class="container">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
</div> 

<?php get_footer(); ?>

Jquery:

function populatelist()
{
var qry=document.getelementbyid('dropdown1').value;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
});
}
}
xmlhttp.open("POST", "help.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("qry="+qry);
}

引用页面:(help.php)

<?php 
/* Template Name: Help */
?>
<?php get_header(); ?>
<?php
global $wpdb;
$value=$_POST['qry'];
$query = "SELECT * FROM zipcode where STATE like '$value'";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_assoc($result))
{
$ee .= "<option value='".$row['CITY']."'>".$row['CITY']."</option>";
}     
echo $ee;
mysql_close();
?>
<?php get_footer(); ?>

问题:如果我使用 WordPress，我应该将 help.php 放在哪里？ 我创建了一个名为“help”的自定义模板，然后在仪表板中创建了一个页面并分配了该模板。它是否正确？我把它上传到主题目录中。也将其放入js文件夹中。我不知道我以前从未尝试过 jquery :S

我应该如何调用jquery？ 我把它放在标题上:

<?php wp_enqueue_script('jquery'); ?>
    <?php wp_head() ?>
<script type="text/javascript" src="<?php bloginfo("template_directory"); ?>/js/zipcode.js"></script>
</head>

我已经这样做了三天了，我已经筋疲力尽了。我真的不知道该把引用页放在哪里

Answer 1

在 zipcode.php 文件中使用以下代码。

<?php
/* Template Name: Zipcode Help */
?>
<?php get_header(); ?>
<?php
global $wpdb;
$query = "SELECT * FROM zipcode group by FULLSTATE";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_assoc($result))
{
  $dd .= "<option value='".$row['STATE']."'>".$row['FULLSTATE']."</option>";
} 
?>
<select name="dropdown1" id="dropdown1">
  <option value="empty" selected>--Select State--</option>
<?php echo $dd; ?>
</select>

<select id="city" name="city">
  <option value="">&nbsp;</option>
</select>

<!--content of the page-->
<div class="container-wrapper clearfix" id="main-content-container">
<div class="container">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
</div> 

<script type="text/javascript">

$(function () { 

    $('#dropdown1').change(function () {

        var value = $(this).val();

        if (value == "") {

            $("#city").html("<option value=''>Select</option>");

        } else {
            $.ajax({
                type: "POST",
                url: "<?php bloginfo('template_directory'); ?>helper/help.php",
                data: "value=" + value,
                success: function (server_response) {

                    $("#city").html(server_response);

                }

            }); //$.ajax ends here

        } //if else     
        return false
    });

}); // function ends here
</script>

<?php get_footer(); ?>

在你的 WordPress 主题文件夹中创建一个名为 helper 的文件夹，并将你的 helper.php 文件放入其中。

在 help.php 文件中使用以下代码；

<?php

$value = $_POST['value'];

global $wpdb;
$value= a_href;
$query = "SELECT * FROM zipcode where STATE like '$value'";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_assoc($result))
{
    $ee .= "<option value='".$row['CITY']."'>".$row['CITY']."</option>";
}       
echo $ee ;      

?>

我没有测试代码，但我认为它应该可以工作。如果您还有其他问题，请告诉我。

**确保 Jquery 已正确加载

非常重要:从 PHP 5.5.0 开始，mysql_query 已弃用。您应该使用 PDO 或 mysqli 扩展。检查这个:http://cz1.php.net/mysql_query