Dynamic Dependent Select Box Using jQuery and Ajax

2

Dynamic Dependent Select Box means whenever there is selected value in the “parent” box, the “child” box will fit its options value according to the value of “parent” box. It can be illustrated like this. Say, we have “country” select box and “city” select box. If we choose “Indonesia” in the “country” select box, the “city” select box will only show some cities located in Indonesia like “Jakarta”,”Semarang” and “Bandung”. It won’t show “Sydney”,”Amsterdam”,”Hamburg” and so on.

In This tutorial we are gonna make simple application to perform Dynamic Dependent Select Box.

Database Structure
This database consists of two tables, country and city

country table

city table

and this is table relationship that needs to be connected in our sample Dynamic Dependent Select Box
Dynamic Dependent Select Box

selectbox.php
This PHP file is used as an html form and also execute client side programming, which is jQuery to perform dynamic dependent select box

getcity.php

db.php

Screenshot
Dynamic Dependent Select Box

Dynamic Dependent Select Box

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

One thought on “Dynamic Dependent Select Box Using jQuery and Ajax

Leave a Reply

Your email address will not be published. Required fields are marked *