1
Expand|Select|Wrap|Line Numbers
- var data = [{dept: 'Marketing', user: []},{dept: 'IT', user: []},{dept: 'Accounting', user: []}];
- function initCombo(){
- var opt1 = document.getElementById('opt1');
- var opt2 = document.getElementById('opt2');
- for(var i=0;i<data.length;i++){
- //alert(data[i].dept);
- var option = document.createElement('option');
- option.value = i;
- option.text = data[i].dept;
- opt1.add(option);
- }
- for(var i=0;i<data.length;i++){
- //alert(data[i].dept);
- var option = document.createElement('option');
- option.value = i;
- option.text = data[i].dept;
- opt2.add(option);
- }
- }
- function save(){
- var input = document.getElementById('input');
- if (input.value != ''){
- var opt1 = document.getElementById('opt1').value;
- data[opt1].user[data[opt1].user.length] = input.value;
- reloadOpt2();
- }else{
- alert('ISI KAN DATA COI');
- }
- input.focus();
- input.value='';
- }
- function reloadOpt2(){
- var opt2 = document.getElementById('opt2').value;
- var optUser = document.getElementById('optUser');
- var length = optUser.options.length ;
- while(optUser.options.length != 0){
- optUser.removeChild(optUser.options[0]);
- }
- for (var i=0; i<data[opt2].user.length; i++){
- var option = document.createElement('option');
- option.value = i;
- option.text = data[opt2].user[i];
- optUser.add(option);
- }
- }
Expand|Select|Wrap|Line Numbers
- <body onload='initCombo()'>
- <select id="opt1">
- </select>
- <br/>
- <input type='text' id='input' value=''/>
- <br/>
- <input type='submit' value='Simpan' onclick='save()'/>
- <br/>
- <select id="opt2" onchange='reloadOpt2()'>
- </select>
- <select id="optUser">
- </select>
here's the js code
Expand|Select|Wrap|Line Numbers
- function myFunction() {
- var x = document.getElementById("mySelect").value;
- document.getElementById("demo1").innerHTML = "title";
- document.getElementById("demo2").innerHTML = "test";
- document.getElementById("demo3").innerHTML = "test";
- document.getElementById("demo4").innerHTML = "test";
- }
- function myFunction1(){
- var x = document.getElementById("mySelect").value;
- document.getElementById("demo1").innerHTML = "title";
- document.getElementById("demo2").innerHTML = "using js DOM";
- document.getElementById("demo3").innerHTML = "test";
- document.getElementById("demo4").innerHTML = "copyright@test";
- }
Expand|Select|Wrap|Line Numbers
- <button id="mySelect" onclick="myFunction1()">Home</button>
- <button onclick="()">Login</button>
- <button id="mySelect" onclick="myFunction()">About</button>
- -----------
- <p align="center" id="demo1"></p></h1></center>
- <p align="left" id="demo2"></p>
- <p align="left" id="demo3"></p>
- <p align="left" id="demo4"></p>
*sorry for my bad english*
