Javascript jquery mobile flip-Toggle切换到更新列表

我试图使用切换开关更新列表，但找不到解决方案。你们有什么意见吗？任何提示都将不胜感激：）

重要提示：

.ui li

列表id是

#myListView

，它是从服务器上以

数据值作为
+项填充的。性别+
“女性”或“男性”。我想创建一个代码，如果用户对男性使用toggle off，那么列表将只通过在
li
中显示“女性”值来更新。反之亦然

到目前为止，我有以下（无工作）代码：

我的HTML如下所示：

<div data-role="content" id="settingsPanel">
<div data-role="fieldcontain" id="menSelector" >    
        <label for="flip-1">Men</label>
        <select name="flip-1" id="flip-1" data-role="slider"data-mini="true" class="genderSelect">
            <option value="off"></option>
            <option selected="selected" value="on"></option>
        </select> 
    </div>

    <div data-role="fieldcontain" id="womenSelector" >  
        <label for="flip-2">Women</label>
        <select name="flip-2" id="flip-2" data-role="slider"data-mini="true" class="genderSelect">
            <option value="off"></option>
            <option selected="selected" value="on"></option>                
        </select>           
    </div>


男人
女人
假设您的li具有性别数据属性，例如

<li data-gender="female"></li>

然后隐藏男性或女性：

$('#myListView li[data-gender="male"]').hide();

更新：

因此，给定翻转开关，处理更改事件并在每次更改时调用名为
ShowList（）
的函数。在ShowList（）中，检查哪些翻转开关打开，如果一个打开，另一个关闭，则隐藏关闭的性别：

$(document).on("pagecreate", "#page1", function(){
    $("#flip-1").on("change", function(){
        if ($(this).val() == "off"){
            $("#flip-2").val("on").slider( "refresh" );
        }

        ShowList();
    });
    $("#flip-2").on("change", function(){
            if ($(this).val() == "off"){
            $("#flip-1").val("on").slider( "refresh" );
        }

        ShowList();
    });
});

function ShowList(){
    var m = $("#flip-1").val() == "on";
    var f = $("#flip-2").val() == "on";
    $('#myListView li').show();
    if (m && !f) {
        $('#myListView li[data-gender="female"]').hide();
    } else if (!m && f) {
        $('#myListView li[data-gender="male"]').hide();
    }
}


将
.val（）
与listview一起使用是不正确的。请解释你想做什么。添加一个带有性别的列表项？嗨@omar，我已经更新了问题。希望更清楚：）。谢谢你的观察。嗨@cytasos，谢谢你！是的，这个列表是通过PHP mysql填充的，我已经有了一个列表，可以同时使用女性和男性。但在“设置”页面中，我有性别切换选项。我的问题是，当用户切换性别选项时，如何刷新列表。好的，我现在明白了，我以为您想获取数据，而不是清除男性或女孩的列表。这很简单，你可以在下面找到答案。看看是否有一个三态按钮，这样你就可以有一个中间态而不是两个按钮。谢谢@ezanker。我正在为+item.gender+添加值，因此列表中要么包含女性数据，要么包含男性数据。我的问题是如何使用翻转开关刷新该列表。很抱歉，我无法有效地解释我自己。@user3356128，好的，我已经更新了答案以使用您的翻转开关。您是最棒的！非常感谢你。我绞尽脑汁想找到解决办法。
$('#myListView li[data-gender="male"]').hide();

$(document).on("pagecreate", "#page1", function(){
    $("#flip-1").on("change", function(){
        if ($(this).val() == "off"){
            $("#flip-2").val("on").slider( "refresh" );
        }

        ShowList();
    });
    $("#flip-2").on("change", function(){
            if ($(this).val() == "off"){
            $("#flip-1").val("on").slider( "refresh" );
        }

        ShowList();
    });
});

function ShowList(){
    var m = $("#flip-1").val() == "on";
    var f = $("#flip-2").val() == "on";
    $('#myListView li').show();
    if (m && !f) {
        $('#myListView li[data-gender="female"]').hide();
    } else if (!m && f) {
        $('#myListView li[data-gender="male"]').hide();
    }
}