Question

我想将此价格范围下拉代码更改为价格范围滑块。尝试了很多但没有运气。有人可以帮我吗？

<div class="form-group">
   <select name="priceFrom" id="priceFrom" class="form-control">
      <option value="0">From</option>
         <?php for ($i=200000; $i <= 9000000; $i+=100000): ?>
            <option value="<?php echo $i; ?>"<?php if ($_GET['priceFrom'] == $i) {
               echo ' selected';
            } ?>>$<?php echo $i; ?></option>
            <?php endfor; ?>
   </select>
</div>
<div class="form-group">
   <select name="priceTo" id="priceTo" class="form-control">
      <option value="0">To</option>
      <?php for ($i=200000; $i <= 9000000; $i+=100000): ?>
         <option value="<?php echo $i; ?>"<?php if ($_GET['priceTo'] == $i) {
            echo ' selected';
         } ?>>$<?php echo $i; ?></option>
      <?php endfor; ?>
   </select>
</div>

Answer 1

请考虑以下内容。

$(function() {
  $(".slider").change(function() {
    var v = $(this).val();
    $(this).next(".value").html(v + "000000");
    if ($(this).is("#priceFrom")) {
      $("#priceTo").attr("min", v).val(v).trigger("change");
    }
  });
});

.form-group label {
  width: 60px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>FROM</label> <input type="range" min="2" max="9" value="2" class="slider" id="priceFrom" /> <span class="value">2000000<span>
</div>
<div class="form-group">
  <label>TO</label> <input type="range" min="2" max="9" value="2" class="slider" id="priceTo" /> <span class="value">2000000<span>
</div>

在这里您可以看到HTML和jQuery代码协同工作，以帮助调整一个或另一个滑块。

需要帮助将下拉列表更改为范围滑块。任何帮助，将不胜感激

1 个答案: