I have experience working in my office, so I wanted to share my experience with you all. In the office there is the addition of data input that I have made that would already be more simple to just pick on the first combobox and the second combobox will automatically be filled with only the appearance is different. For example, we create a program to select for example Laptop Brand: Acer, Dell, Toshiba, and so on. Having selected the laptop brand in the second combobox will populate the type of the laptop brand that has been selected, for example, we chose the Acer then the second combobox will be filled with aspire-5570z, aspire-4440 and so on.


The first step:
First we create index.php files for calling on localhost, the following source code index.php:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Combobox Dinamis PHP </title>
</head>

<body>
Merek Laptop :
<select id= "merek"> </select> <br />
Jenis Laptop :
&nbsp;&nbsp;&nbsp; <select name="" id= "jenis"> </select>
//letakkan files kode.js disini
</body>
</html>


In / / put files kode.js here put this script code to call kode.js files, the following source code.

<script type="text/javascript" src="kode.js"></script>



Step two:
Make javascript files with names kode.js useful to call the data id = "brand" and id = "type" that will show the files index.php, the following source code kode.js



// mendapatkan object dalam document
function getObject(id) {
     return document.getElementById(id);
}
    
// ubah data array PHP ke JSON
var merek = [["1","Apple"],["2","Lenovo"],["3","Toshiba"],["4","Dell"],["5","Acer"],["6","Sony"]];

var jenis = [["1","1","MacBook Air MD223"],["2","1","MacBook Pro MD101"],["3","1","Macbook Pro MD322"],["4","2","B475-6883 "],["5","2","Edge E120-6FA"],["6","2","G470-0137"],["7","2","S200"],["8","3","NB510 DOS"],["9","3","Portege R830-2047U"],["10","3","Qosmio F750-1011X"],["11","4","Inspiron 14z"],["12","5","Aspire E1-421-11202G32Mn "],["13","5","Aspire One 725"],["14","5","Aspire S3 Ultrabook Core i7"],["15","5","Aspire V5-471G-52464G50Ma "],["16","6","Vaio SVD11-215CV"],["17","6","Vaio SVT13-125CV (Ultrabook)"]];
    
var option = '<option value="0" selected>-- Pilih Merek --</option>',
     // opsi default dengan nilai 0
     combomerek = getObject('merek'),
     combojenis = getObject('jenis');
    
// inject merek
for (var i = 0; i < merek.length; i++) {
     option += '<option value="' + merek[i][0] + '">' + merek[i][1] + '</option>';
}
combomerek.innerHTML = option;
    
// inject jenis
combojenis.innerHTML = '<option value="0">-- Pilih Jenis --</option>';
    
// add event listener ke combobox, atau lebih gampang buat fungsi dan
// tambahkan property onchange di html combobox merek
combomerek.addEventListener('change', function(e) {
     var option = '',
           selected = this.value;
    
     // jika belum memilih
     if (selected == '0') {
           combojenis.innerHTML = '<option value="0">-- Pilih Kode --</option>';
           return;
     }
          
     // cacah array jenis
     for (var i = 0; i < jenis.length; i++) {
           if (jenis[i][1] == selected) {
                option += '<option value="' + jenis[i][0] + '">' + jenis[i][2] + '</option>';
           }
     }
     combojenis.innerHTML = option;
}, false);



If we want to add brands and types of laptops, we just add the data to the existing array to the "var brand" and "var type" with the record we have to adjust the code that has been specified as an example: ["1", "1" , "MD223 MacBook Air"], I'll explain a bit array data is "1" the first will be printed on your database instance using a database for data storage, "1" the second is to determine the brand of laptop contained in the laptop brand list and "macbook Air MD223" will display the text in the combobox type of laptop.

Once we make the above files we just put these two files into the folder "name" or may use other names are invoked through http://localhost/name in your browser.

Only that I can explain to you all, if you do not understand my exposure above you can download the source code below.
thank you



0 komentar:

Post a Comment

if you have any questions about posting, feel free to comment.
thank you