Assistant Javascript cascading dropdown list |
-
oshihari
Newbie
-
Posts: 1
Threads: 1
Joined: May 2018
Reputation:
0
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>
|