刷新jQuery滑塊與選擇onchange事件

Question

我有一個窗體有幾個字段，包括一個jQuery滑塊和一個選擇下拉框。目前，當我改變了下拉菜單的選擇，我通過下面的JavaScript清除其他幾個字段的值：

function clearVolumes() { 
    document.getElementById('size').value = ""; 
    document.getElementById('amount').value = ""; 
    document.getElementById('hardwood_testet').value = ""; 
} 

，我稱這種與平變化：

<select id="catbiomass" name="categories[]" onchange="clearVolumes()" /> 

這是偉大的工作爲了我。然而，在表單中有一個jQuery滑塊（我通過SO發現），我也試圖用這個onchange來刷新回零，但沒有運氣。滑塊的jQuery是：

$("#hardwoodslider").slider({ 
    range: "min", 
    min: 0, 
    max: 100, 
    step: 5, 
    value: 0.00, 
    slide: function(event, ui) { 
    $("#hardwood_testet").val(ui.value); 
    $(ui.value).val($('#hardwood_testet').val()); 
    } 
    }); 
$("#hardwood_testet").keyup(function() { 
    $("#hardwoodslider").slider("value" , $(this).val()) 
}); 

我嘗試是添加以下的jQuery：

$("#catbiomass").onchange(function() { 
    $("#hardwoodslider").slider("value" , 0) 
}); 

這是行不通的，當我改變選擇欄滑塊不被重置爲零。我一直在閱讀，這個代碼應該工作，所以是這樣的問題，因爲事實上，我實際上在選擇字段中調用兩個onchange事件，一個通過javascript和一個通過jquery？

感謝

Answer 1

我嘗試了兩種可能的解決方案，並都工作對我罰款：

1. 結合兩者的onChange功能

   $("#catbiomass").onchange(function() { 
       document.getElementById('size').value = ""; 
       document.getElementById('amount').value = ""; 
       document.getElementById('hardwood_testet').value = ""; 
       $("#hardwoodslider").slider("value" , 0) 
   });

   或

   function clearVolumes() { 
       document.getElementById('size').value = ""; 
       document.getElementById('amount').value = ""; 
       document.getElementById('hardwood_testet').value = ""; 
       $("#hardwoodslider").slider("value" , 0); 
   }

2. 使用 「.bind」，而不是「 .onchange「：

   $("#catbiomass").bind('change', function() { 
       $("#hardwoodslider").slider("value" , 0); 
   });

您可以查看我的演示here。