metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
98 lines (87 loc) • 2.69 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<title>Test Any - Metro 4 :: Popular HTML, CSS and JS library</title>
<style>
.example {
height: 100%;
display: flex;
justify-content: center;
}
.example > * {
max-width: 400px;
}
</style>
</head>
<body class="m4-cloak">
<h1 class="text-center">Select Example</h1>
<div class="text-center">
<button class="button" onclick="addOption()">Add option</button>
<button class="button" onclick="addOption(5)">Add option</button>
<button class="button" onclick="addOptions()">Add options</button>
<button class="button" onclick="removeOption(5)">Del option</button>
<button class="button" onclick="addOptions2()">Add option</button>
</div>
<div class="example">
<select id="select" data-role="select"></select>
</div>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
// $(document).ready(function() {
//
// var json = '{"K001": "Vendor1","K002": "Vendor.2","K003": "Vendor 3 GmbH","K004": "Vendor 4 GmbH & Co. KG"}';
//
// var select = Metro.getPlugin('#select', 'select');
//
// console.log(JSON.parse(json))
//
// select.data(JSON.parse(json));
// });
function addOptions2(){
var tArray = {
"K001": "Vendor1",
"K002": "Vendor.2",
"K003": "Vendor 3 GmbH",
"K004": "Vendor 4 GmbH & Co. KG"
}
var select = Metro.getPlugin('#select', 'select');
select.data(tArray, 'K002');
}
function addOption(v){
var val = v ? v : $.random(1, 100);
var select = Metro.getPlugin('#select', 'select');
select.addOption(val, val)
}
function addOptions(){
var val = [1, 2, 3, 4, 5];
var val2 = {
11: 11,
12: 12
};
var val3 = [
{
val: 100,
title: 100,
selected: false
},
{
val: 200,
title: 200,
selected: true
}
];
var select = Metro.getPlugin('#select', 'select');
select.addOptions(val)
select.addOptions(val2)
select.addOptions(val3)
}
function removeOption(v){
var select = Metro.getPlugin('#select', 'select');
select.removeOption(v)
}
</script>
</body>
</html>