将wp_Dropdown_Pages()重定向到AJAX请求?

时间:2016-06-24 作者:Sweepster

我想获得wp\\u dropdown\\u pages()的结果,以触发ajax请求来显示图像,而不是将用户重定向到页面url。

换句话说,我的页面都是针对汽车模型的。我想使用wordpress功能提供网站可用车型的列表,并在隐藏的carsphoto div中显示他们的照片。

以下是迄今为止我所掌握的代码,它显示了我网站的页面(汽车)列表,并在选择某个选项时自动触发jquery提交-无需提交按钮。

<li id="pages">
<form action="<?php bloginfo(\'url\'); ?>" method="get">
<?php  
$select = wp_dropdown_pages(
                    array(
                        \'post_type\' => \'page\',
                        \'show_option_none\' => \'Select Car\',
                        \'echo\' => 0
                    )
                );

echo str_replace(\'<select \', \'<select onchange="this.form.submit()" \', $select);
?>
</form>
</li>

<div class="carphoto" style="display:hidden"></div>
这些汽车的照片存储在我上传目录的cars文件夹中。每张汽车照片都有一个与页面标题相对应的名称(没有空格)。

因此,我知道我要做的是修改“select onchange”代码,将剥离的页面标题发送到ajax请求,以获取与下拉列表中选择的页面标题相对应的照片。。。我只是不知道怎么做。

感谢您的指导!

1 个回复
最合适的回答,由SO网友:Sweepster 整理而成

以下是我提出的解决方案:

<div id="selection1">
<div id="dropdown1">
   <form id="choice1" action="<?php bloginfo(\'url\'); ?>" method="get">
   <?php  
   $select = wp_dropdown_pages(
                        array(
                            \'post_type\' => \'page\',
                            \'show_option_none\' => \'Select Car\',
                            \'echo\' => 0
                        )
                    );

    echo $select; 
    ?>
   </form>
</div>

<div id="firstchoice"></div>
</div>

<script>
$(\'#choice1\').change(function(){ //if the select value gets changed
var png = \'.png\';
var urlstart = <?php echo json_encode($url); ?>;
var imageSource = $(this).find(\'option:selected\').text().replace(/\\s/g, \'\').substring(6); //get the data from data-picture attribute
if(imageSource){ //if it has data
  $(\'#firstchoice\').html(\'<img src="\'+urlstart+imageSource+png+\'">\'); // insert image in div firstchoice
} else {
  $(\'#firstchoice\').html(\'\'); //remove content from div firstchoice, thus removing the image
}
})
</script>