<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue Js</title>
</head>
<body>
<select id="dropdown_main">
</select>
<select id="dropdown_relate">
</select>
</body>
<script src="/js/jquery.min.js"></script>
<script>
$(document).ready(function() {
var Arr1 = {id1: 'Op1', id2: 'Op2'};
var Arr2 = {
id1: {id1: 'Op1.1', id2: 'Op1.2', id3: 'Op1.3'},
id2: {id1: 'Op2.1', id2: 'Op2.2'}
};
$('select#dropdown_main').html('');
var iii = 0;
for (var key in Arr1) {
$('select#dropdown_main').append('<option value="' + key + '">' + Arr1[key] + '</option>');
iii++;
if(Object.keys(Arr1).length == iii)
{
select_custom_op();
}
}
function select_custom_op()
{
var val = $('select#dropdown_main').val();
for(var key in Arr2[val]){
$('select#dropdown_relate').append('<option value="' + key + '">' + Arr2[val][key] + '</option>');
}
}
$(document).on('change', 'select#dropdown_main', function () {
$('select#dropdown_relate').html('');
var val = $(this).val();
for(var key in Arr2[val]){
$('select#dropdown_relate').append('<option value="' + key + '">' + Arr2[val][key] + '</option>');
}
});
});
</script>
</html>
User Panel
