javascript - 使用选择表单选项过滤内容

标签 javascript jquery html css wordpress

我正在开发一个 WordPress 主题,我需要使用具有三个选择器的表单来过滤内容,例如我有 Region、Specialist、Place

当用户从Region -> Specialist -> Place中选择一个值时,用户可以看到这三个值的内容

  • 如果 Region 有值:“Region A”
  • 如果专家有值:“律师”
  • 如果 Place 有值:“Chicago”

用户只能看到A区、律师和芝加哥的内容。

目前我尝试这个链接How can I filter out a div from two select options?

在 HTML 上工作正常,但我不明白如何使用 WP_Query 来过滤 div 上的内容

我有这个代码的表格:

<form method="get">
	<select id="select_rubro">
		<option value="null"><?php _e('Rubro', 'cape'); ?></option>
		<?php
        //list terms in a given taxonomy (useful as a widget for twentyten)
        $taxonomy = 'rubro';
        $tax_terms = get_terms($taxonomy); ?>

        <?php foreach ($tax_terms as $tax_term) { 
            echo '<option value="' .$tax_term->slug. '">' .$tax_term->name. '</option>';
        } ?>
	</select>
	<select id="select_especialidad" class="middle">
		<option value="null"><?php _e('Especialidad', 'cape'); ?></option>
		<?php
        //list terms in a given taxonomy (useful as a widget for twentyten)
        $taxonomy = 'especialidad';
        $tax_terms = get_terms($taxonomy); ?>

        <?php foreach ($tax_terms as $tax_term) { 
            echo '<option value="' .$tax_term->slug. '">' .$tax_term->name. '</option>';
        } ?>
	</select>
	<select id="select_region">
		<option value="null"><?php _e('Región', 'cape'); ?></option>
		<?php
        //list terms in a given taxonomy (useful as a widget for twentyten)
        $taxonomy = 'region';
        $tax_terms = get_terms($taxonomy); ?>

        <?php foreach ($tax_terms as $tax_term) { 
            echo '<option value="' .$tax_term->slug. '">' .$tax_term->name. '</option>';
        } ?>
	</select>
</form>

在代码片段中,我将所有术语值都称为声明的分类法。

有什么想法吗?提前谢谢你,请原谅我的英语

最佳答案

因为您想根据下拉选择向用户显示数据,其中所有术语在 word press 管理中都是分开的(无层次结构)

我建议您使用 Ajax 功能,在页面加载时在所有下拉列表下方放置一个空白,并使用唯一的类/ID。

在 Ajax 文件中传递下拉列表的所有选定值(term ids)并在 wp_query 下运行以获取筛选记录。

如果您用 slug 替换并传入 ajax 文件,您可以从下拉值中获取术语 ID。

$args['tax_query'] = array(
    array(
      'taxonomy' => 'put custom taxonomy name',
      'field' => 'id',
      'terms' => array_values($ids_of_terms)
    )
  );
  $query = new WP_Query($args);

您可以通过用空白 div 替换并显示结果来附加 div 的 Ajax 响应。

关于javascript - 使用选择表单选项过滤内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39651580/

相关文章:

asp.net - 在 Asp.net 应用程序中使用什么 : Callback, AjAX 或简单的 Javascript

javascript - 数据可视化 : Best tools to generate simple charts in PDF with Javascript or Python

javascript - 使用 jQuery 在浏览器中播放 .m3u 播放列表的方法

javascript - 避免 View 中出现错误的请求

jquery - MVC3 : make checkbox required via jQuery validate?

javascript - 链接ajax并按顺序执行。 Jquery 延迟

javascript - 如何定义样式内容的 JQuery UI 工具提示项选项

javascript - jQuery:如果其值显示:无,如何仅触发当前菜单并删除样式属性?

html 净化器 - 允许链接吗?

javascript - 如何添加 Div 的行/列