Jquery移动翻转开关切换性别（如Tinder）

Question

我正在开发一个具有设置页面的应用，用户可以使用翻转切换来选择性别。翻转开关由男性（开关）和女性（开关）组成。根据选择，将显示具有性别偏好的ul列表。我正在努力寻找使用PHP或JQuery / JavaScript的解决方案。来自你们的任何代码解决方案？

HTML5代码：

<div data-role="page" id="page-settings" class="page-panel">
<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">
            <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">
            <option value="off"></option>
            <option selected="selected" value="on"></option>                
        </select>           
    </div>

-ul -li列表从数据库+ item.Gender +附加值：女性或男性。

任何帮助都会非常感激，因为我一直在寻找foo三天但没有成功。