Friday, 1 November 2013

Memaparkan Daerah dan Bandar berdasarkan Negeri (Jquery)

10:42 am    No comments

District dan Town akan disable apabila State tidak di pilih
Apabila negeri di pilih, secara automatik District akan enable dan memaparan daerah yang berkaitan sahaja.
Setelah daerah di pilih, secara automatik juga bandar akan enable dan memaparkan bandar yang berkaitan dengan daerah yang di pilih.


Assalamualaikum dan Salam Sejahtera,

Diatas adalah contoh select option Negeri, Daerah, dan Bandar. apabila Negeri belum di pilih, maka select option untuk daerah dan bandar akan disable. Setelah di pilih Negeri baru lah Daerah akan terpapar. Ini menggunakan teknik JQuery. Sebelum itu programmer mesti lah load library yang terlibat.

Cara- cara coding adalah seperti di bawah :

1. CONTROLLER
File Name : state.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// didalam class state create function get_district dan function get_town

function get_district($state)
{
   echo json_encode($this->Mymodel->get_select_list2('lt_district', array('key'=>'id_district', 'val'=>'description'),'', array('state' => $state)));      
} 
function get_town($district)
{
   echo json_encode($this->Mymodel->get_select_list2('lt_town', array('key'=>'id_town', 'val'=>'description'),'', array('district' => $district)));        
}

// di letakkan selepas function insert. untuk memangil data dari database melalui model. 
$data['district'] = $this->Mymodel->get_select_list('lt_district', array('key'=>'id_district', 'val'=>'description'));
$data['state'] = $this->Mymodel->get_select_list('lt_state', array('key'=>'id_state', 'val'=>'description'));
$data['town'] = $this->Mymodel->get_select_list('lt_town', array('key'=>'id_town', 'val'=>'description'));


2. JQUERY
File Name : jq_state.php 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//ajax - paparkan senarai daerah berdasarkan pilihan negeri
$('#workplace_state').change(function(){
$("#workplace_district > option").remove();
var state = $('#workplace_state').val(); 
if(state!='')
 { $("#workplace_district").removeAttr("disabled");}
 else
 { $("#workplace_district").attr("disabled", "disabled");}

$.post('<?php echo base_url() ?>index.php/applicant_info/get_district/'+state,function(data){       
var obj = $.parseJSON(data);
var option = $("<option>").val('').text('-- Select --');
$('#workplace_district').append(option);
      $.each(obj, function(key,val) {
      option = $("<option>").val(key).text(val);
      $('#workplace_district').append(option); 
      });                  
  });       
});

//ajax - paparkan senarai bandar berdasarkan pilihan daerah
$('#workplace_district').change(function(){
$("#workplace_town > option").remove();
var district = $('#workplace_district').val();
if(district!='')
 { $("#workplace_town").removeAttr("disabled");}
 else
 { $("#workplace_town").attr("disabled", "disabled");}

$.post('<?php echo base_url() ?>index.php/applicant_info/get_town/'+district,function(data){       
var obj = $.parseJSON(data);
var option = $("<option>").val('').text('-- Select --');
$('#workplace_town').append(option);
      $.each(obj, function(key,val) {
      option = $("<option>").val(key).text(val);
      $('#workplace_town').append(option); 
      });                     
  });     
});


3. VIEWS
File Name : state.php 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="row-fluid">
        <div class="span4"><span class="lblTitle"><label for="workplace_state">State &nbsp;&nbsp;:<br><span class="dwi">Negeri &nbsp;&nbsp;&nbsp;&nbsp;</span></label></span></div>
 <div class="span8">
  <?php echo form_dropdown('workplace_state', $state, set_value('workplace_state',  $appData['workplace_state']), 'id="workplace_state" class="inputbox" ') ?> <span class="required">*</span><br>
                <?php echo form_error('workplace_state', '<span class="required">','</span>')?>
        </div>
</div>

<div class="row-fluid">
        <div class="span4"><span class="lblTitle"><label for="workplace_district">District &nbsp;&nbsp;:<br><span class="dwi">Daerah &nbsp;&nbsp;&nbsp;&nbsp;</span></label></span></div>
        <div class="span8">
         <?php echo form_dropdown('workplace_district', $district, set_value('workplace_district', $appData['workplace_district']), 'id="workplace_district" class="inputbox"') ?> <span class="required">*</span><br>
                <?php echo form_error('workplace_district', '<span class="required">','</span>')?>
        </div>
</div>

<div class="row-fluid">
 <div class="span4"><span class="lblTitle"><label for="workplace_town">City / Town &nbsp;&nbsp;:<br><span class="dwi">Bandar &nbsp;&nbsp;&nbsp;&nbsp;</span></label></span></div>
 <div class="span8">
   <?php echo form_dropdown('workplace_town', $town, set_value('workplace_town', $appData['workplace_town']), 'id="workplace_town" class="inputbox"') ?> <span class="required">*</span><br>
                 <?php echo form_error('workplace_town', '<span class="required">','</span>')?>
  </div>
</div>


----------------------------------------------------------
Disediakan Oleh : Zainimar Binti Zulkifli
Sumber : Sistem AHPiS

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)