我的頁面上有一個jQuery UI滑塊。它開始與：如何讓用戶更改jQuery UI滑塊的選項？

$("#slider").slider({ 
    value: 6, 
    min: 6, 
    max: 120, 
    step: 6 
});

這工作正常。

我有一個選擇元素旁邊的6,12和24作爲選項。我想完成的是讓用戶選擇12，並且滑塊的step，min和value全部轉到12（24相同）。我已經試圖建立一個函數：

$('#dropdown').change(function(){ 
    $("#slider").slider("option", "value", $(this).val()); 
    $("#slider").slider("option", "min", $(this).val()); 
    $("#slider").slider("option", "step", $(this).val()); 
    $("#slider").slider("option", "max", 120); 
});

然而這一切都爲使被去值12，然後在點擊滑塊，它跳躍一路結束（120），只是停留在那裏。

我是否需要摧毀滑塊並從頭開始重做？

EDIT＃1：

我剛下載螢火蟲並檢查與控制檯滑塊，和的值都返回正確的（分鐘= 12，值= 12，步長= 12，最大= 120 ）。有誰知道爲什麼它如此固執，跳躍/堅持到底？

來源

2012-04-03 Lil' Bits

你能告訴我們關於這個的演示嗎？ – Starx 2012-04-04 00:21:53

我會做一個小提琴，看看它是否做同樣的事情。 – 2012-04-04 00:24:49

發現此問題。在使用它來更改滑塊的選項之前，您需要將值從<select>解析爲int。

$('#dropdown').change(function() 
{ 
    var currentVal = parseInt($("#slider").slider("value")); 
    var newOptions = parseInt($(this).val()); 
    $("#slider").slider("value", currentVal); 
    $("#slider").slider("option", "min", newOptions); 
    $("#slider").slider("option", "step", newOptions); 
    $("#slider").slider("option", "max", 120); 
});

工作實例

http://jsfiddle.net/DigitalBiscuits/VSBCT/1/

來源

2012-04-03 23:42:48

謝謝你的小提琴！如果沒有人能告訴我爲什麼我的滑塊在明天很怪異，我可能會這樣做;除了我不會預先創建3個滑塊，我會根據選擇對象中的值創建它們，因爲公司可能會在稍後要求提供更多值。 – 2012-04-04 00:12:48

我剛纔改變了這個答案。不知道你在我之前還是之後看到它。這個新的工作，你需要它。 – 2012-04-04 00:15:53

給你一個三千塊錢！這讓我瘋狂了好幾天！非常感謝！ – 2012-04-04 00:34:06

實施是正確的。但你可以緩存結果

$('#dropdown').change(function(){ 
    var val = this.value; 
    $("#slider").slider("option", "value", val); 
    $("#slider").slider("option", "min", val); 
    $("#slider").slider("option", "step", val); 
    $("#slider").slidYou can er("option", "max", 120); 
});

來源

2012-04-03 23:54:54 Starx

不，對不起。這並沒有解決問題。我知道我可以緩存$（this）.val（）/ this.value，我只是沒有看到一個理由。 – 2012-04-04 00:01:45

如何讓用戶更改jQuery UI滑塊的選項？

回答

工作實例

相關問題