2011-06-10 80 views
2

有一個問題,jQuery.selectmenu 當我點擊重置按鈕,我想重置像所有其他領域。 任何輸入現在刷新,但與此插件不刷新。 該怎麼辦?jQuery UI的selectmenu - 如何重置下拉式窗體重置按鈕

多一點細節:

<form action="#" name="editform"> 
    <fieldset> 
     <select name="speed" id="speed"> 
      <option value="Slower">Slower</option> 
      <option value="Slow">Slowwwwwwwwww</option> 
      <option value="Medium" selected="selected">Medium</option> 
      <option value="Fast">Fast</option> 
      <option value="Faster">Fasterrrrrrrrrrrrrrrr</option> 
     </select> 
    </fieldset> 
<a class="refForm" href="javascript:document.editform.reset()">Reset</a> 
</form> 

現在,當我點擊重置它不復位(選擇)下拉 我希望所有選擇字段回去與復位按鈕點擊默認。

順便說一句:這是插件: Wiki jQuery-ui-selectmenu

乾杯! 盧卡斯

回答

0

望着演示頁:

http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html

我沒有看到任何證據表明,它有一個復位方法。但如果這樣做,我希望它被稱爲是這樣的:

$('select#speed').reset(); 

注意,與插件,你必須調用jQuery的包裹選擇對象的方法,而不是整個表格。

您的JS調用的.reset()是一個內置的DOM方法。您可以使用DOM方法重置選擇這樣的:

getElementById("speed").selectedIndex = 0; 
+1

嘿, 那麼它的工作原理是這樣的: 如果您重置 - 指數reseted爲默認,但jQuery.selectmenu不被刷新。 如果你得到選定的索引 - 它正在改變,但下拉停留在最後選擇的位置 可悲的是沒有.reset()這個;) – beltrone 2011-06-10 13:52:57

+0

即使使用標準輸入重置按鈕,它仍然可以工作,但不會更新視圖,所以我必須刷新/重建jQuery.selectmenu或其他東西。 但是! - 有趣的事情 - 如果你點擊2次它正在改變>< – beltrone 2011-06-10 14:10:10

+0

任何想法? 如何重新加載窗體重置整個selectmenu? – beltrone 2011-06-10 15:41:19

0

你可以在你的重置按鈕\觸發的,而不是在形式的重置事件處理程序結合的Click事件綁定的功能。訣竅是,當您重置表單時,原始選擇將重置爲其初始值,因此,表單重置後,您可以獲取選擇的值並使用該值更新您的自定義選擇菜單。這樣做可以讓您重置自定義選擇菜單。下面是代碼:

$('.refForm').click(function(){ 
    var $that = $(this), 
     select; 
    setTimeout(function(){ 
     $that.closest('form').find('.ui-selectmenu').each(function(){ 
      select = $(this).prev(); 
      select.selectmenu("value", select.val()); 
     }) 
    }, 0) 
}) 

該功能可讓原重置了選擇的值被放置在裏面的setTimeout與零延遲 - 來確保之前函數將訪問它的原創選擇將被重置了。

另請注意,如果選項標記沒有指定值屬性,則上面的代碼在IE中不起作用(就我測試的情況而言,爲7-9)。所以你需要指定所有選項的值。

4

復位形式

$("form .select").selectmenu("index", 0); 
+0

selectmenu()從哪裏來?有沒有需要它的任何jquery? – 2013-07-31 10:34:07

+0

恐怕沒有像selectmenu方法所接受的「index」這樣的參數。看到我的答案 - http://stackoverflow.com/a/39591945/1705383 – 2016-09-20 10:34:32

1

唯一的解決辦法的工作對我的所有組合框:

$('#resetButton').click(function() { 
    $("#Service").selectmenu('destroy'); 
    $("#Service").prop('selectedIndex',0); 
    $("#Service").selectmenu(); 
})'; 
+0

不是最好的解決方案,但我唯一可行的解​​決方案。 Thx – 2017-05-03 09:36:20

0

jQuery用戶界面的selectmenu有更新特性。你應該叫的是:

$('select').selectmenu('refresh'); 

要調用後復位事件的形式,在發射時的原始<select>已經復位當然。沒有「正確」的方法來做到這一點(例如沒有後置事件)。當然,你可以設置一個超時時間(如前所述),但那會讓人覺得不舒服。我發現這樣做的最好/最簡潔的方法是在調用刷新之前編寫自己的「重置」函數並調用form.reset(),如上所示。你可以例如監聽你的復位按鈕(S)點擊:

// Modify selectors to fit your needs. 
$('.resetButton').click(function() 
{ 
    $('#searchForm')[0].reset(); 
    $('select').selectmenu('refresh'); 
    return false; 
}); 

我返回false防止復位()被調用兩次。

1

我發現它很簡單,只要:(用您選擇替換#mymenu)

$( 「#MyMenu菜單」)[0] .selectedIndex = 0;

$(「mymenu」)。selectmenu(「refresh」);

+0

這對jQuery UI版本1.11.4非常有用 – 2016-01-09 23:10:36

0

對派對稍遲,但考慮到所有其他答案不正確或不完整,我會投入我的2美分!

所有你需要做的是

$('#speed').val("Slower"); // your default option's value 
$('#speed').selectmenu("refresh");