動態設置最大值到滑塊

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的任何變更偵聽器。

我強烈建議您使用我首先提供更新答案的簡單方法。