Welcome Guest, Not a member yet? Register   Sign In
Assistant Javascript cascading dropdown list
#1

I previously managed to create cascading dropdown list successfully but now I am having a problem and I don't know what a problem might be. I want to create cascading dropdownlist which state, then county then state. The cascading doesn't work at all. Can anyone assist please here is the code


<div class="row">

 <div class="col-md-12">
  <div class="panel panel-primary" data-collapsed="0">
         <div class="panel-heading">
             <div class="panel-title" >
              <i class="entypo-plus-circled"></i>
     <?php echo get_phrase('account_creation_form');?>
             </div>
            </div>
   <div class="panel-body">
    
                <?php echo form_open('admin/member/create/' , array('class' => 'form-horizontal form-groups-bordered validate ajax-submit', 'enctype' => 'multipart/form-data'));?>
     
     <div class="form-group">
      <label for="field-1" class="col-sm-4 control-label"><?php echo get_phrase('id_number');?></label>
                        
      <div class="col-sm-7">
                       <div class="input-group">
        <span class="input-group-addon"><i class="entypo-user"></i></span>        
        <input type="text" class="form-control" name="id_number" maxlength="13" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>" value="" autofocus>
                         </div>
      </div>
     </div>
     
     
     <div class="form-group">
      <label for="field-1" class="col-sm-3 control-label"><?php echo get_phrase('birth_date');?></label>
                        
      <div class="col-sm-5">
                       <div class="input-group">
        <span class="input-group-addon"><i class="entypo-calendar"></i></span>
        <input type="text" class="form-control datepicker" name="birthdate" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>" value="" autofocus>
                         </div>
      </div>
     </div>
     
     <div class="form-group">
      <label for="field-1" class="col-sm-4 control-label"><?php echo get_phrase('gender');?></label>
                        
      <div class="col-sm-7">
                          <select class="selectboxit" name="gender">
                            <option><?php echo get_phrase('select_a_gender');?></option>
       <option><?php echo get_phrase('male');?></option>
       <option><?php echo get_phrase('female');?></option> 
                        </select>
      </div>
     </div>
     
     
     <div class="form-group">
      <label for="field-4" class="col-sm-4 control-label"><?php echo get_phrase('state');?></label>
                        
      <div class="col-sm-7">
       <select name="optone" id="stateSel" class="selectboxit">
        <option value="" selected="selected">Select province</option>
       </select>
      </div>
     </div>
     
     <div class="form-group">
      <label for="field-5" class="col-sm-4 control-label"><?php echo get_phrase('country');?></label>
                        
      <div class="col-sm-7">
       <select name="opttwo" id="countySel" class="selectboxit"">
        <option value="" selected="selected">Please select province first</option>
       </select>
      </div>
     </div>
     
     <div class="form-group">
      <label for="field-6" class="col-sm-4 control-label"><?php echo get_phrase('city');?></label>
                        
      <div class="col-sm-7">
       <select name="optthree" id="citySel" class="selectboxit">
        <option value="" selected="selected">Please select region first</option>
       </select>
      </div>
     </div>
    
                    
                    <div class="form-group">
      <div class="col-sm-offset-4 col-sm-7">
       <button type="submit" class="btn btn-info" id="submit-button"><?php echo get_phrase('add_member');?></button>
                         <span id="preloader-form"></span>
      </div>
     </div>
                <?php echo form_close();?>
            </div>
        </div>
    </div>
</div>
<script>
 // url for refresh data after ajax form submission
 var post_refresh_url = '<?php echo base_url();?>index.php?admin/reload_member_list';
 var post_message  = 'Data Created Successfully';
</script>
<script>
 var $input1 = $("input[name=id_number]"),
  $input2 = $("input[name=birthdate]"),
  $input3 = $("input[name=gender]");
 $input1.on("keyup", function(){
  
 var id = $input1.val().split(" "), // gets the ID number you typed
        birthdate="",
        gender="",
        part1 = id[0],
        part2 = id[1];
    
    console.log($input1.val());
    
    if(part1.length>5) birthdate = part1.substr(0,2) + "/" + part1.substr(2,2) + "/" + part1.substr(4,2);
 
 $input2.val(birthdate);
    
    if(part2 && part2.length){
         if(parseInt(part2[0]) <5)
             gender = "Female"
         else
             gender = "Male"
      
        $input3.val(gender);
    }
 
})
</script>
<script type="text/javascript">
var stateObject = {
    "California": {
        "Monterey": ["Salinas", "Gonzales"],
        "Alameda": ["Oakland", "Berkeley"]
    },
    "Oregon": {
        "Douglas": ["Roseburg", "Winston"],
        "Jackson": ["Medford", "Jacksonville"]
    }
}
window.onload = function () {
    var stateSel = document.getElementById("stateSel"),
        countySel = document.getElementById("countySel"),
        citySel = document.getElementById("citySel");
    for (var state in stateObject) {
        stateSel.options[stateSel.options.length] = new Option(state, state);
    }
    stateSel.onchange = function () {
        countySel.length = 1; // remove all options bar first
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done   
        for (var county in stateObject[this.value]) {
            countySel.options[countySel.options.length] = new Option(county, county);
        }
    }
    stateSel.onchange(); // reset in case page is reloaded
    countySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done   
        var cities = stateObject[stateSel.value][this.value];
        for (var i = 0; i < cities.length; i++) {
            citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
        }
    }
}
</script>

<!-- calling ajax form submission plugin for specific form -->
<script src="assets/js/ajax-form-submission.js"></script>
Reply




Theme © iAndrew 2016 - Forum software by © MyBB