亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

需要幫助將下拉菜單更改為范圍滑塊。任何幫助將不勝感激

需要幫助將下拉菜單更改為范圍滑塊。任何幫助將不勝感激

喵喔喔 2023-05-11 09:46:42
我想將此價格范圍下拉代碼更改為價格范圍滑塊。嘗試了很多但沒有運氣。任何人都可以幫助我嗎?<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>
查看完整描述

1 回答

?
萬千封印

TA貢獻1891條經驗 獲得超3個贊

考慮以下。


$(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 代碼協同工作以幫助調整一個或另一個滑塊。



查看完整回答
反對 回復 2023-05-11
  • 1 回答
  • 0 關注
  • 130 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號