为搜索表单构建数组选择选项下拉菜单

Question

我想在相同的选择选项下拉列表中创建价格范围过滤器下拉列表 示例：

<select name="price" class="filterSelectBox">
	<option value="disable">Select Price</option>
                    <option value="1">$500-1000</option>
                    <option value="1">$1000-1500</option>
                    <option value="1">$1500-2000</option>
                    <option value="1">$2000-2500</option>
                    <option value="1">$2500-3000</option>
</select>

我创建了 php 自定义数组和如下代码来获得像上面一样的下拉列表，但是我没有得到我想要的结果，有人可以为我解决这个问题吗？ 提前致谢？ 我的想法是稍后在过滤中使用元查询。

<?php
                 $filterPrice = array(
                    array(
                    'maximum_price' => '1000','1500','2000','2500','3000',
                    'minimum_price'=> '500','1000','1500','2000','2500',
                    ));
                ?>
            <li class="filter">
                <span class="selector">
                <select name="price" class="filterSelectBox">
			         <option value="disable"><?php _e("Select price","um_lang"); ?></option>
                <?php 
                    foreach($filterPrice as $price):
                ?>
                   
                    <option value="<?php echo $price['minimum_price'].'-'.$price['maximum_price'] ?>"><?php echo $price['minimum_price'].'-'.$price['maximum_price'] ?></option>
                   
                <?php 
               
                endforeach;
                ?>
                </select>  
                </span>
            </li>

Answer 1

源数组对我来说看起来很奇怪，但我认为这会产生您想要的菜单。

$filterPrice = array(
    'maximum_price' =>  array('1000','1500','2000','2500','3000'),
    'minimum_price' =>  array('500','1000','1500','2000','2500')
);

$maxprices=$filterPrice['maximum_price'];
$minprices=$filterPrice['minimum_price'];

$html=array('<select name="price" class="filterSelectBox">');
foreach( $maxprices as $index => $max ){
    $min = $minprices[ $index ];
    $value = $min . '-' . $max;
    $html[]="<option value='{$value}'>{$value}";
}
$html[]='</select>';


echo implode( PHP_EOL, $html );

如果我理解正确，那么您将需要 javascript 来处理菜单中的选定选项并发送我认为的 ajax 请求。虽然说实话，我并不完全确定我了解您的确切要求。

您可以为每个选项分配dataset 属性，然后使用javascript 来使用这些值。例如，如果您将上面的行更改为此

$html[]="<option value='{$value}' data-min=$min data-max=$max>{$value}";

然后添加一个像这样的简单javascript函数

$html[]="
<script type='text/javascript'>
    document.querySelectorAll('select[name=\"price\"]')[0].addEventListener('change',function(e){
        var selected=e.target.options[ e.target.options.selectedIndex ];
        console.info( 'use these values for filtering: %s, %s', selected.dataset.min, selected.dataset.max );
    },false);
</script>";

单个最小值和最大值可通过数据集属性获得。希望这会有所帮助。

Answer 2

这部分很奇怪：

 $filterPrice = array(
    array(
      'maximum_price' => '1000','1500','2000','2500','3000',
      'minimum_price'=> '500','1000','1500','2000','2500',
  ));

改成：

 $filterPrice = array(
      'maximum_price' => array('1000','1500','2000','2500','3000'),
      'minimum_price' => array('500','1000','1500','2000','2500'),
 );

//.....
foreach($filterPrice['maximum_price'] as $index=>$max_price){
    $min_price = $filterPrice['minimum_price'][$index];
    echo "<option value=".$min_price.'-'.$max_price.">".$min_price.'-'.$max_price."</option>";
}
//....

提交后：

//... 
$filter = $_POST['price']; 
list($price_from,$price_to) = explode('-',$filter);
//... using $price_from & $price_to for filtering
//... 
$args = array(
   'meta_query' => array(
        'key'     => 'price', // <- meta_key name for prices
        'value'   => array( $price_from, $price_to ),
        'type'    => 'numeric',
        'compare' => 'BETWEEN',
    ),
   // ... others query-params
);  

$q = new WP_Query( $args );
//.... 

阅读更多关于WP_Query