$('input#year_pick').menuoptions({"Sort": [],
"Data": { 1: "2016", 2:"2017" }, "MenuOptionsType":"Rocker",
"onSelect": function(mo, data) { console.log(data); }
});
$('input#MaleFemale').menuoptions({"Sort": [],
"Data": { 'M': "Male", 'F':"Female" }, "MenuOptionsType":"Rocker",
"onSelect": function(mo, data) { console.log(data); }
});
$('input#TrueFalse').menuoptions({"Sort": [],
"Data": { 'T': "True", 'F':"False" }, "MenuOptionsType":"Rocker",
"onSelect": function(mo, data) { console.log(data); }
});
$('input#YesNo').menuoptions({"Sort": [],
"Data": { 'Y': "Yes", 'N':"No" }, "MenuOptionsType":"Rocker",
"onSelect": function(mo, data) { console.log(data); }
});
$('button#menutest').on('click', function (e) {
var tst = $('input#YesNo').menuoptions('re_serialize',
$('form#tst').serialize());
$('div#fake_alert').html(tst);
});
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:40px'>
True or False
</div>
<div class="col-md-8 col-xs-8 text-left">
<input type=text name=TrueFalse id='TrueFalse' >
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:40px'>
Yes or No
</div>
<div class="col-md-8 col-xs-8 text-left">
<input type=text name=YesNo id='YesNo' >
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:40px'>
Male or Female
</div>
<div class="col-md-8 col-xs-8 text-left">
<input type=text name=MaleFemale id='MaleFemale' >
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:60px'>
2016 or 2017
</div>
<div class="col-md-8 col-xs-8 text-left">
<input type=text name=year_pick id='year_pick' >
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:60px'>
</div>
<div class="col-md-8 col-xs-8 text-left">
<span class="text-left"><button class="a" type="button" id="menutest" >Show serialize values</button></span>
</div>
</div>
</form>
<div id=fake_alert></div>
<!--// <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> //-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="../dist/js/jquery.menuoptions.js?v_1820"></script>
<link rel="stylesheet" href="../dist/css/menuoptions.css?v_1820">
<link rel="stylesheet" type="text/css" href="css/style.css?v_2339">