change dimension of an object by drop-down list selection JavaScript

Question

I need to change dimension of a specific object in a 3D model by drop-down list selection.

var activities = document.getElementById("stand");   
var wallMaterial = new THREE.MeshLambertMaterial({color:resources.settings.wallColor});
var partitionLeft = new THREE.Mesh(geometries.partition, materials.partitionMaterial);

alert(activities);

activities.addEventListener("change", function() {
    if(activities.options[activities.selectedIndex].value=="stand1") {
        var footRight = new THREE.Mesh(new THREE.BoxGeometry(0.140, 0.15, 0.05), materials.footRightMaterial);
        partitionLeft.add(footRight);
        footRight.position.set(1.15,-1.85,0);

    } else {
        var footRight = new THREE.Mesh(new THREE.BoxGeometry(6.450, 4.15, 5.25), materials.footRightMaterial);
        partitionLeft.add(footRight);
        footRight.position.set(0.15,-0.85,0);
    }
});

The issue in this solution is when switch from one selection to other(drop-down) the previous dimension from option 1 is still there. It is not hiding.

After selecting the 2nd option both figures are appear in the model. Then nothing's happen when changing the options from drop-down. Both objects appear in the model.

What I need to do is hide 1 object after changing the selection of the drop-down.

Any suggestions?

Answer 1

The problem is that you keep adding meshes to partitionLeft but you never remove them.

Try something like this instead:

var activities = document.getElementById("stand");   
var wallMaterial = new THREE.MeshLambertMaterial({color:resources.settings.wallColor});
var partitionLeft = new THREE.Mesh(geometries.partition, 
materials.partitionMaterial);

alert(activities);


var footRight1 = new THREE.Mesh(new THREE.BoxGeometry(0.140, 0.15, 0.05), materials.footRightMaterial);
footRight1.position.set(1.15,-1.85,0);

var footRight2 = new THREE.Mesh(new THREE.BoxGeometry(6.450, 4.15, 5.25), materials.footRightMaterial);
footRight2.position.set(0.15,-0.85,0);

activities.addEventListener("change", function() {
    if(activities.options[activities.selectedIndex].value=="stand1") {
        partitionLeft.add(footRight1);
        partitionLeft.remove(footRight2);
    } else {
        partitionLeft.add(footRight2);
        partitionLeft.remove(footRight1);
    }
});