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

Question

I am working on an app that will have a setting page where the user can use the flip toggle to select the gender. The flip toggle consist of male (on off)and female (on off). Depending of the selection, an ul list will display with gender preference. I am struggling trying to find a solution with PHP or JQuery/JavaScript. Any code solution from you guys?

The HTML5 code:

<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>

The -ul -li list is appending from database +item.Gender+ with values : female or male.

Any help will be very appreciated since I have been searching foo three days with no success.