0

这是我的问题：我使用 Jquery mobile 来设置一些表单元素的样式。表单元素之一是多选菜单。我希望这个选择菜单具有这种行为http://jsfiddle.net/LynCV/（这个 jsfiddle 示例不是我的，我在互联网上找到了它）。我可以在本机选择菜单样式上实现此行为，但它不适用于自定义菜单样式。

这是不符合我要求的代码：

<!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：我在这里的问题可能被认为是重复的，但我搜索了答案，但我不明白如何使用我找到的解决方案来解决我的问题。所以我要求对我的问题有一个具体的答案。

编辑2：如您所见，我是所有这一切的初学者。

感谢您的时间和可能的答案。如果可能的话，请给我一些代码示例。谢谢！

4

1 回答 1

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");
        });
    });
于 2013-05-30T13:51:40.843 回答