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

Question

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

我的问题是我有滑块来更改一个参数，但我还需要一个带有第二个参数的下拉框。我不知道如何使用现有的 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>'; 
?>

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

Implement a drop down box with ajax and jquery ui slider

javascript

ajax

jquery

dropdownbox

jquery-ui-slider