我想获得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请求,以获取与下拉列表中选择的页面标题相对应的照片。。。我只是不知道怎么做。
感谢您的指导!
最合适的回答,由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>