2013-04-23 272 views
0

这是我的问题:我使用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:正如你所看到的,我是所有这些的初学者。

感谢您的时间和可能的答案。请尽可能提供一些代码示例。谢谢!

回答

1

在你的情况下,只需拨打

$("#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"); 
     }); 
    }); 
相关问题