Populate the last selectbox based on the first - php

Question

I tried to populate a select box based on the first but no result, no error but the second select box is not populate:
My html:
<div class="form-group">
<label>Firm:</label>
<select class="form-control marg-left-10" id="firm">
<?php if($all_firms): ?>
<?php foreach($all_firms as $firm): ?>
<option value="<?php echo $firm['id_firm']; ?>"><?php echo $firm['name_firm']; ?></option>
<?php endforeach; ?>
<?php endif; ?>
</select>
</div>
<div class="form-group">
<label>Administrator</label>
<select class="form-control marg-left-10" id="admin">
</select>
</div>
My php:
public function getAllFirms()
{
$this->load->database();
$all_firms = $this->db->query("SELECT *FROM firms");
if ($all_firms->num_rows())
{
$all_firms = $all_firms->result_array();
}
else
{
$all_firms = NULL;
}
return $all_firms;
}
public function getAdministrator($id)
{
$this->load->database();
$get_admin = $this->db->query("SELECT * FROM users,firms WHERE firms.id_firm = users.fk_firm and users.id = $id");
if ($get_admin->num_rows())
{
$get_admin = $get_admin->result_array();
}
else
{
$get_admin = NULL;
}
return $get_admin;
}
My script:
$("#firm").change(function() {
var selectedMark = $("#firm").val();
if (selectedMark != "") {
$.ajax({
type: "GET",
url: "<?php echo base_url() . 'user/getAdministrator'; ?>" + selectedMark,
success: function(data) {
$("#admin").html("");
$("#admin").append("<option value=''></option>");
$.each(data, function() {
$("#admin").append("<option value='" + this.id + "'>" + this.name + "</option>");
});
}
});
}
});
I use CodeIgniter as backend language, the first selectt box is populated but the second not.Please help me guys...HELP please!!!!! HELP ME GUYS!!Another idea to resolve this?

Answer 1

it looks like you've forgotten to add # when you calling 'admin' select. I.e. see 'success' section of your JS and change:
$('admin')...
to
$('#admin')...

Answer 2

you are looking like this:
<div class="form-group">
<label>Firm:</label>
<select class="form-control marg-left-10" id="firm">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<label>Administrator</label>
<select class="form-control marg-left-10" id="admin"></select>
</div>
<script>
$("#firm").change(function() {
var selectedMark = $("#firm option:selected").val();
var selectedMarkt = $("#firm option:selected").text();
if (selectedMark != "") {
$.ajax({
type: "GET",
url: "test.php",
success: function(data) {
$("#admin").append("<option value='" + selectedMark + "'>" + selectedMarkt + "</option>");
}
});
}
});
</script>

Answer 3

Looks like you need another "/" on this line:
url: "<?php echo base_url() . 'user/getAdministrator'; ?>" + selectedMark,
Right after 'user/getAdministrator'.