codeigniter form_dropdown with onChange don't work - php

Question

No error but not working:
I need to set a four order choose of sports in gym, so i have to use four dropdown, i have te retrieve the list of data from database, it's an array drom database that containe 30 disciplines when i choose the fisrt one in the first dropdown the seconde dropdown musn't containe this value, and also when i choose a value from the 3rd dropdown this dropdown musn't containe value1 and value2 from dropdown1 and dropdown2, the same thing about the dropdown four it must containe only 27
My view :
<?php $sports = array(
'aucun choix' => ' Aucun choix',
'aerobic' => ' 01- Aerobic',
'musculation' => ' 02- Musculation',
'judo' => ' 03- Judo',
'taekwondo' => ' 04- Taekwando',
'aikido' => ' 05- Aikido',
'karaté' => ' 06- Karaté',
'haltérophilie' => ' 07- Haltérophilie',
'sport de salle' => ' 08- Sport de salle',
'sport feminin' => ' 09- Sport feminin',
'sport plein air' => ' 10- Sport plein air',
'sport de pêche' => ' 11- Sport de pêche',
'basketball' => ' 12- Basketball',
'hand-voley ball' => ' 13- Hand-voley ball',
'football' => ' 14- Football',
'pétanque' => ' 15- Pétanque',
'natation' => ' 16- Natation',
'jeux d\'echec' => ' 17- Jeux d\'echec',
'golf' => ' 18- Golf',
'cyclisme' => ' 19- Cyclisme',
'tenis' => ' 20- Tenis',
'equitation' => ' 21- Equitation',
'chasse tir vole' => ' 22- Chasse tir vole',
);
?>
<script>
function callSave(select) {
var parent = select.parentNode;
var usedValues = {};
for (var i = 0; i < parent.children.length; ++i) {
var s = parent.children[i];
if (s.nodeName.toLowerCase() != 'select') {
continue;
}
if (s.value != '') {
usedValues[ s.value ] = s;
}
}
for (var i = 0; i < parent.children.length; ++i) {
var s = parent.children[i];
if (s.nodeName.toLowerCase() != 'select') {
continue;
}
for (var j = 0; j < s.children.length; ++j) {
var o = s.children[j];
if (o.nodeName.toLowerCase() != 'option') {
continue;
}
var p = o.value == '' ? undefined : usedValues[o.value];
if (p == undefined || p == s) {
o.style.display = '';
}
else {
o.style.display = 'none';
}
}
}
}
</script>
<div <?php if(form_error('sport_ordre1')) { echo 'class="control-group error"'; } else {echo 'class="control-group"';} ?> >
<label class="control-label">Sport ordre 1 :</label>
<div class="controls">
<?php echo form_dropdown('sport_ordre1', $sports , $this->input->post('sport_ordre1') ? $this->input->post('sport_ordre1') : $participant_sport->sport_ordre1 , 'onChange="callSave(this)"'); ?>
<span class="help-inline"><?php echo form_error('sport_ordre1'); ?></span>
</div>
</div>
<div <?php if(form_error('sport_ordre2')) { echo 'class="control-group error"'; } else {echo 'class="control-group"';} ?> >
<label class="control-label">Sport ordre 2 :</label>
<div class="controls">
<?php echo form_dropdown('sport_ordre2', $sports , $this->input->post('sport_ordre2') ? $this->input->post('sport_ordre2') : $participant_sport->sport_ordre2 ,'onChange="callSave(this)"'); ?>
<span class="help-inline"><?php echo form_error('sport_ordre2'); ?></span>
</div>
</div>
<div <?php if(form_error('sport_ordre3')) { echo 'class="control-group error"'; } else {echo 'class="control-group"';} ?> >
<label class="control-label">Sport ordre 3 :</label>
<div class="controls">
<?php echo form_dropdown('sport_ordre3', $sports , $this->input->post('sport_ordre3') ? $this->input->post('sport_ordre3') : $participant_sport->sport_ordre3 , 'onChange="callSave(this)"'); ?>
<span class="help-inline"><?php echo form_error('sport_ordre3'); ?></span>
</div>
</div>
<div <?php if(form_error('sport_ordre4')) { echo 'class="control-group error"'; } else {echo 'class="control-group"';} ?> >
<label class="control-label">Sport ordre 4 :</label>
<div class="controls">
<?php echo form_dropdown('sport_ordre4', $sports , $this->input->post('sport_ordre4') ? $this->input->post('sport_ordre4') : $participant_sport->sport_ordre4 , 'onChange="callSave(this)"'); ?>
<span class="help-inline"><?php echo form_error('sport_ordre4'); ?></span>
</div>
</div>
the probleme is that when i select a value in one dropdown it apear on others, so the method onChange don't work for this case. Any help please ?

Answer 1

Well I think that you when you call .parentNode, you should access the DOM through its id.
As you didn't accessed it through id you have just pass the DOM element to the function.
'onChange="callSave(this.id)"';
but what actually do you need. You can use jquery.