i have to clear existing value in the select option value

Question

i got solution by using this code

var module_list = document.getElementById("taModule");
$("#taModule").empty();  //this is the solution code
for(i=0;i<pid.length;i++){
if (pid[i] == projid){
var option = document.createElement("option");              
option.text = mname[i];
option.value = mid[i];
module_list.appendChild(option);
}   
}

Hi i have to dropdown list box. one have list of values like projects. second one is module dropdown list so, when the client select particular project. to list the module related to project. javascript:

function populate(val) {
        var projid = val;
        var pid = new Array();
        var mid = new Array();
        var mname = new Array();

        pid = <?php echo json_encode($pid); ?>;
        mid = <?php echo json_encode($mid); ?>;
        mname = <?php echo json_encode($mname); ?>;
var module_list = document.getElementById("taModule");
$('#taModule').val('');     
                for(i=0;i<pid.length;i++){
            if (pid[i] == projid){
            var option = document.createElement("option");
                option.text = mname[i];
                option.value = mid[i];              
                module_list.appendChild(option);
            }   
        }
    }

html code:

<tr>
    <td><label for="taProj"><?php echo t('Project')?>:</label></td>         
    <td><select name="taProj" id="taProj" onchange= "populate(this.value)">
    <option value="" >-------------------------</option>
    <?php   foreach ($tap as $row){?>
    <option value="<?php echo $row['proj_id']; ?>" ><?php echo $row['proj_name'];?></option> <?php } ?>
    </select></td>
    </tr>       
    <tr>                        
    <td><label for="taModule"><?php echo t('Module Name')?>:</label></td>
    <td><select name="taModule" id="taModule" >
    <option value="" >-------------------------</option>
    </select></td>
    </tr>

if i select the project, it show the related modules but if again i select other project the related module added with the existing module list. so i want to avoid this. i try some script remove, null and empty is not workig ., please any one suggest me and point out me how to achieve this task thank you

Kumar

Answer 1

I found solution. just add the code in the js function, before the for loop

$("#taModule").empty();

thanks to stackoverflow.

Answer 2

if you're not using jQuery:

var select = document.getElementById('/*id attribute of your select here*/');
for (var option in select){
    select.remove(option);
}