动态设置最大值到滑块

Question

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

编辑： 当用户选择一个类别，我显示所有的产品从该类别，并且与AJAX部分I的值设定为输入#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/

修订ANSWER

你真的需要输入框？最简单的方法是直接改变它。在变化（）的AJAX调用与

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

更换

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

- 功能

如果您需要输入框，我可以解释为什么当前版本无法正常工作。当你用.val()改变一个具有onchange监听器的元素的值时，你总是必须通过你自己来触发事件。

即您例如在评论

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

你总是可以通过调用它迫使事件函数没有传递任何参数。

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

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