jquery mobile - 選擇，通過單擊「全部」選項取消選擇所有選擇菜單選項

這是我的問題：我使用jquery mobile來設計一些表單元素。表單元素之一是多選菜單。我想要這個選擇菜單有這種行爲http://jsfiddle.net/LynCV/（這個jsfiddle的例子不是我的，我發現它在互聯網上）。我可以在本機選擇菜單樣式上實現此行爲，但它不適用於自定義菜單樣式。jquery mobile - 選擇，通過單擊「全部」選項取消選擇所有選擇菜單選項

這裏是不會做的代碼是什麼，我想：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>select-deselect all</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    /* this jquery script is from the jsfiddle and it is working on native styling but not on a custom styling.*/ 
    <script> 
     $(document).ready(function(){ 
      $('select').change(function(){ 
       if (this.selectedIndex == 0){ 
        $('option:gt(0)', this).prop('selected',false); 
       }else{ 
        $('option:first', this).prop('selected',false); 
       } 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <label for="selectBox">Choose one or more</label> 
    <select id="selectBox" multiple="multiple" data-native-menu="false">//select element in note a native menu but custom you can see it by data-native-menu="false" 
     <option value="all">all</option> 
     <option value="one">one</option> 
     <option value="tow">tow</option> 
     <option value="three">three</option> 
    </select> 
</body> 
</html>

再次我想是：當選擇「全部」選項，取消選擇所有其他選項，不允許任何選擇其他選項沒有取消選擇「全部」選項。取消選擇「全部」選項時，允許選擇一個或多個選項。

edit1：閱讀jQuery的移動API。我在這裏播種http://api.jquerymobile.com/select/#method-refresh，以實現我想我必須使用refresh（）方法。但我不明白如何使用它。

edit2：我在這裏的問題可能被認爲是重複的，但我搜索了答案，我無法理解如何使用我發現的解決方案來解決我的問題。所以我要求對我的問題給出具體的答案。

edit2：正如你所看到的，我是所有這些的初學者。

感謝您的時間和可能的答案。請儘可能提供一些代碼示例。謝謝！

來源

2013-04-23 gerti

在你的情況下，只需撥打

$("#selectBox").selectmenu("refresh");

你已經改變了「選擇」屬性之後。

$(document).ready(function(){ 
     $('select').change(function(){ 
      if (this.selectedIndex == 0){ 
       $('option:gt(0)', this).prop('selected',false); 
      }else{ 
       $('option:first', this).prop('selected',false); 
      } 
      $("#selectBox").selectmenu("refresh"); 
     }); 
    });

來源

2013-05-30 13:51:40 hopperpl

jquery mobile - 選擇，通過單擊「全部」選項取消選擇所有選擇菜單選項

回答

相關問題