實現ajax和jQuery UI滑塊的下拉框

林不太好編碼，但我仍然努力做到最好。我最近開始使用jQuery UI滑塊與Ajax更新從我的數據庫。實現ajax和jQuery UI滑塊的下拉框

我的問題是，我有滑塊來更改一個參數，但我也需要一個下拉框與第二個參數。我不知道如何用現有的jQuery滑塊代碼實現下拉框。

我想使用ajax，以便數據庫自動更新，如果我拖動滑塊（工作），如果我在下拉更改（現在我可以從下拉收集值，但我不能讓它用ajax自動更新，它只會改變一次，我也拖動滑塊）。

如果有人能給我一個如何編寫代碼的例子，這樣我就可以同時使用滑塊和下拉菜單，這樣它就可以自動更新onchange了，這真是太棒了！謝謝。

我的滑塊適用於jQuery。該功能我對這個（值2是我收集從下拉列表中值下降的權利，但很明顯，我需要這樣的功能）：

$(function slider() { 

$.ui.slider.prototype.widgetEventPrefix = 'slider'; 

$("#slider-range-max").slider({ 
range: "max", 
min: 1, 
max: 4, 
step: 1, 
value: 2, 
stop: function(event, ui) { 
$("#amount").val(ui.value); 

var value1 = ui.value; 
var value2 = document.getElementById("livebelopp").value 

$.ajax({ 
     type: "GET", 
     url: "/slider-results.php", 
     data: "loptid="+value1+"&belopp="+value2, 
     cache: false, 
     success: function(html){ 
     $("#content_update").html(html); 
     } 
    }); 

} 

}); 

});

下拉很簡單：

<form> 
<select style="border-radius: 5px;" id="livebelopp"> 
<option value="500">500 kr</option> 
<option value="1000">1 000 kr</option> 
<option value="2000">2 000 kr</option> 
<option value="3000" selected="selected">3 000 kr</option> 
<option value="4000">4 000 kr</option> 
<option value="5000">5 000 kr</option> 
<option value="6000">6 000 kr</option> 
<option value="7000">7 000 kr</option> 
<option value="8000">8 000 kr</option> 
<option value="9000">9 000 kr</option> 
<option value="10000">10 000 kr</option> 
</select> 
</form>

來源

2015-03-02 Uttsor

我認爲這確實是

<head> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     var sliderValue = 2; // make sure this corresponds to the default 
     $(function slider() { 
     $.ui.slider.prototype.widgetEventPrefix = 'slider'; 
     $("#slider-range-max").slider({ 
      range: "max", 
      min: 1, 
      max: 4, 
      step: 1, 
      value: 2, 
      stop: function(event, ui) { 
      sliderValue = ui.value; // easiest solution; keep the value somewhere; we read this variable just before sending the data. 
      send_update(); 
      } 
     }); 
     }); 
     // onChange of the select 
     $('#livebelopp').change(function() { 
     send_update(); 
     }); 
     /** 
     * We let both the onChange of the <select> and the onStop of the slider trigger this function. 
     */ 
     function send_update() { 
     var value1 = sliderValue; 
     var value2 = $("#livebelopp").val(); 
     $.ajax({ 
      type: "GET", 
      url: "slider-results.php", 
      data: {loptid: value1, belopp: value2}, // object notation 
      cache: false, 
      success: function(html) { 
      $("#content_update").html(html); 
      } 
     }); 
     } 
    }); 
    </script> 
</head> 
<body> 
    <div id="slider-range-max"></div> 
    <form> 
    <select style="border-radius: 5px;" id="livebelopp"> 
     <option value="500">500 kr</option> 
     <option value="1000">1 000 kr</option> 
     <option value="2000">2 000 kr</option> 
     <option value="3000" selected="selected">3 000 kr</option> 
     <option value="4000">4 000 kr</option> 
     <option value="5000">5 000 kr</option> 
     <option value="6000">6 000 kr</option> 
     <option value="7000">7 000 kr</option> 
     <option value="8000">8 000 kr</option> 
     <option value="9000">9 000 kr</option> 
     <option value="10000">10 000 kr</option> 
    </select> 
    </form> 
    <hr> 
    <div id="content_update"></div> 
</body>

對於調試，我這樣做：

滑塊results.p惠普

<?php 
echo 'Request: <pre>' . print_r($_GET, true) . '</pre>'; 
?>

來源

2015-03-02 14:55:31

哇，完美的工作。非常感謝您花時間幫助我。對此，我真的非常感激。我會試着看看它，並弄清楚你在這裏做了什麼，以便我可以學習。再次感謝。 – Uttsor 2015-03-02 22:47:33

很高興能爲您提供幫助 – 2015-03-03 12:12:49

實現ajax和jQuery UI滑塊的下拉框

回答

相關問題