$('button#cfg').menuoptions({
"Data": [{ "Select list on right": function() { resetMO ("right"); } },
{ "2 columns": function() { resetMO ("colcnt");} },
{ "Custom width (100px)": function() { resetMO ("width");} },
{ "Use rocker control for binary choices": function() { resetMO ("rocker");}},
{ "Programatically set all values": function() { resetMO ("setvalues");}},
{ "Reset to default": function() { resetMO ("default");} } ],
"MenuOptionsType":"Navigate",
"ShowAt" : "right",
"ClearBtn": true,
"onSelect": function(mo, data) {
console.log(mo, data.newVal, data.type );
},
"Sort": [] // don't sort
});
$('#pizzatype').menuoptions({
"Data": { 1: "Sicilian", 2: "Neopolitan"},
"ClearBtn": true,
"Sort": [] // don't sort
});
$('input#toppings').menuoptions({
"Data": { 1:"Anchovie",2:"Green pepper", 3:"Pepperoni",
4:"Meat", 5:"Mushroom"},
"onSelect": function(mo, data) {
console.log(mo, data.newVal, data.type );
},
"ClearBtn": true,
"Sort": [] // don't sort
});
$('input#cheese').menuoptions({
"Data": { 1:"Light",2:"Regular", 3:"Extra"},
"onSelect": function(mo, data) {
console.log(mo, data.newVal, data.type );
},
"ClearBtn": true,
"Sort": [] // don't sort
});
$('input#crust').menuoptions({
"Data": { 1:"Thin",2:"Regular", 3:"Thick"},
"onSelect": function(mo, data) {
console.log(mo, data.newVal, data.type );
},
"ClearBtn": true,
"Sort": [] // don't sort
});
$('input#cooked').menuoptions({
"Data": { 1: "Lightly baked", 2:"Regular", 3: "Well done"},
"onSelect": function(mo, data) {
console.log(mo, data.newVal, data.type );
},
"ClearBtn": true,
"Sort": [] // don't sort
});
$('#delivery').menuoptions({
"Data": { 1: "Deliver", 2:"Pick up"},
"ClearBtn": true,
"Sort": [] // don't sort
});
$('#drivertip').menuoptions({
"Data": { 1: "2.00", 2:"2.50", 3:"3.00", 4:"4.00", 5: "4.50", 6:"1,000,000.00 (very good driver)"},
"ClearBtn": true,
"Sort": [] // don't sort
});
$('button#menutest').on('click', function (e) {
var tst = $('input#cooked').menuoptions('re_serialize',
$('form#tst').serialize());
console.log(tst);
$('div#fake_alert').html(tst);
});
<div id=main_column class="col-md-9 col-xs-9 text-center">
<form id=tst>
<!-- START_HTML -->
<div class="row">
<div class="col-md-3 col-xs-3 text-right" style='height:80px'>
</div>
<div class="col-md-9 col-xs-9 text-left">
<div id=buttons>
<button type="button" class="jq_button" style='padding:8px;' id="cfg" >Change MenuOptions Configuration</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:40px'>
Pizza Type
</div>
<div class="col-md-8 col-xs-8 text-left">
<input class="form-control" type=text name=pizzatype id='pizzatype' placeholder='Pizza type'>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:40px'>
Toppings
</div>
<div class="col-md-8 col-xs-8 text-left">
<input class="form-control" type=text name=toppings id='toppings' placeholder='Toppings'>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:40px'>
Crust thickness
</div>
<div class="col-md-8 col-xs-8 text-left">
<input class="form-control" type=text name=crust id='crust' placeholder='Crust'>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:40px'>
Cheese Amount
</div>
<div class="col-md-8 col-xs-8 text-left">
<input class="form-control" type=text name=cheese id='cheese' placeholder='Cheese'>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:40px'>
Bake Instructions
</div>
<div class="col-md-8 col-xs-8 text-left" >
<input class="form-control" type=text name=cooked id='cooked' placeholder='Cooked'>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:40px'>
Delivery Instructions
</div>
<div class="col-md-8 col-xs-8 text-left">
<input class="form-control" type=text name=delivery id='delivery' placeholder='Delivery type'>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 text-right" style='height:40px'>
Driver tip
</div>
<div class="col-md-8 col-xs-8 text-left">
<input class="form-control" type=text name=drivertip id='drivertip' placeholder='Driver tip'>
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-3 text-right">
</div>
<div class="col-md-9 col-xs-9 text-left">
<span class="text-left"><button class="a" type="button" id="menutest" >Show serialize values</button></span>
</div>
</div>
<div id=fake_alert></div>
<br /><br />
</form>
</div> <!-- column 2 (main) -->
<!--// <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">