javascript - 如何在此 PHP 页面中用简单的 HTML 选择替换此价格 slider ？选择选项可以传递 2 个值(最低价格和最高价格)吗？

Question

我对 PHP 很陌生，而且我绝对不喜欢前端(我更喜欢 Java 后端)，并且我遇到以下问题(我认为对于具有一些 PHP\前端背景的人来说非常简单)。

我正在开发一个非常旧式的 PHP Web 应用程序。

在一个页面中，我有一个包含价格选择器的表单，用户可以通过该选择器选择搜索产品的价格范围(例如从 50 美元到 100 美元)。使用选择器，用户可以选择范围内的最小王子和最大王子。对于 slider ，它使用这个 JavaScript 库:https://refreshless.com/nouislider/

这是我的搜索页面 PHP 代码中的价格范围 slider :

<div class="nouislider-wrapper">
    <div class="nouislider" data-min="0" data-max="<?php echo $max_price; ?>" data-start="<?php echo "[".$price_min.",".$price_max."]"; ?>" data-step="10" data-direction="<?php echo RTL_DIR; ?>" data-input="price_range"></div>
    <?php echo $texts['PRICE']." / ".$texts['NIGHT']; ?> : <?php echo CURRENCY_SIGN; ?> <input type="text" name="price_range" class="slider-target" id="price_range" value="" readonly="readonly">
</div>

好的，根据我的理解，它只是将最低价格放入 $price_min 中，将最高价格放入 $price_max 中。

我需要删除以前的 slider 并将其替换为一个简单的下拉菜单，例如一个简单的 HTML select 标记，如下所示:

<select>
    <option value="XXX">50$-100$</option>
    <option value="YYY">100$-150$</option>
    <option value="ZZZ">150$-200$</option>
    <option value="WWW">200$+</option>
</select> 

我的问题是:当用户从此选择选项卡中选择语音时，如何传递 2 个值(例如 50 和 100)？是否可以将 2 个值($price_min 和 $price_max)传递到 select 标记的 option 元素中？

如果可能的话，我宁愿不要更改逻辑(传递其他值)，因为它是一个非常遗留的应用程序，并且处理使用这些值的后端的更改可能会很复杂，所以如果我可以在选择它更好。

你对此有何看法？

Answer 1

您不能在 selecttag 中单独传递两个值，但您可以这样做

<select name="range">
    <option value="<?php echo $price_min.'-'.$max_price; ?>"><?php echo $price_min.'$-'.$max_price.'$'; ?></option>
</select>

现在你必须在 php 端做一些事情

<?php
// suppose you select 50$-100$ you get 50-100 in $range 
$range = $_POST['range'];
$values = explode("-",$range);
$min_value = $values[0]
$max_value = $values[1] 
?>