使用ajax和jquery ui滑块实现一个下拉框

Question

不幸的是我不太擅长编码，但我仍然在努力做到最好。 我最近开始使用带有ajax的jquery ui滑块来从我的数据库进行更新。

我的问题是我有滑块来改变一个参数，但我还需要一个带有第二个参数的下拉框。 我不知道如何使用现有的jquery滑块代码实现下拉框。

我想使用ajax，以便数据库自动更新，如果我拖动滑块（工作），如果我更改下拉（现在我可以从下拉列表收集值，但我不能让它自动更新与ajax ，它只会改变一次我也拖动滑块）。

如果有人可以给我一个如何编写代码的示例，以便我可以使用滑块和下拉菜单，以便它自动更新，这将是惊人的！ 谢谢。

我的滑块适用于jquery。 我有这个功能（value2是我现在收集下拉值的地方，但显然我需要一个函数）：

$(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>

Answer 1

我认为这样做

<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.php

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