Question

我正试图在我的滑块中动态设置最大值，最大值是从输入#max得到的，我试过$（“＃max”）。val将这段代码放在最大变量中，但它不是'工作。

编辑：当用户选择一个类别时，我显示该类别中的所有产品，并且使用ajax部分我将值设置为输入#max（最高价格）

//When user select one category, I display all the product from this category, and in my ajax  part I
$('#category').change(function () {

 $.ajax({
    url: 'ajax.php',
    data: {category: category},
    dataType: 'json',
    cache: false,
    type: "GET",
    success: function(data){     
        if (data.length > 0) {
            data.forEach(function (elem) {
                $('#max').val(elem.MaxPrice);  //set the Maximum price in the hidden input          
                $('#listing_annonce_int').append('<div id="title">'+ elem.title +'</div><div id="price">'+ elem.price +'</div>');
                })
            }
        }
    })
  
});

/**************************************/

function showProducts(minPrice, maxPrice) {
  $("#listing_annonce_int .listing_annonce_view").hide().filter(function() {
    var price = parseInt($(this).data("price"), 10);
    return price >= minPrice && price <= maxPrice;
  }).show();
}

$(function() {
  var options = {
    range: true,
    min: 0,
    max: 20000,
    values: [0, 5000],
    slide: function(event, ui) {
      var min = ui.values[0],
          max = ui.values[1];              

      $("#amount").val(min + " € - " + max + " €");
      showProducts(min, max);
    }
  }, min, max;

  $("#slider-range").slider(options);

  min = $("#slider-range").slider("values", 0);
  max = $("#slider-range").slider("values", 1);

  $("#amount").val( min + " €- " + max + " €");
  showProducts(min, max);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<select id="category" name="category">
<option value='1'>cat 1</option>
<option value='2'>cat 2</option>
</select>

    <input type="text" id="amount"/>
    <input type="text" id="max"/>
    <div id="slider-range"></div>

Answer 1

这是因为您没有做任何事情来设置新值。您需要添加此侦听器：

$('#max').keyup(function(){
    $( "#slider-range" ).slider( "option", "max", parseInt($(this).val()) );
});

您还应该查看该功能的纪录片：http://api.jqueryui.com/slider/#option-max

工作小提琴：https://jsfiddle.net/4p2mL282/1/

更新的答案

你真的需要输入框吗？最简单的方法是直接改变它。取代

$('#max').val(elem.MaxPrice);

与

$( "#slider-range" ).slider( "option", "max", parseInt(elem.MaxPrice));

在change（） - 函数

的AJAX调用中

如果您需要输入框，我可以解释您当前版本无法正常工作的原因。当您使用.val()更改具有onchange-listener的元素的值时，您始终必须自己触发该事件。

即。为您在评论中的示例

$('#max').val('1000').change();

您总是可以通过调用函数来强制事件而不传递任何参数。

但这仍然不是你正确的问题。您的问题是，您正在#category的更改函数中设置#max字段的值，但您没有#max的任何更改侦听器。

我强烈建议您使用我首先提供更新答案的简单方法。

将Max值动态设置为滑块

1 个答案: