Change selected index

[Sub_Seven]

Hello masters of client-side

I need a little hint here, I would like to change the selected option (from a select menu) when another select menu changes.

I have this script to hide/show select menus that change depending on the selection of another select menu:

<script type="text/javascript">
function change()
{
switch (document.getElementById("tt").value)
{
case "o-d-t":
document.getElementById("odt").style.display = "block"
document.getElementById("vp").style.display = "none"
document.getElementById("cp").style.display = "none"
document.getElementById("vp").selectedIndex = 0
break;
case "v-p":
document.getElementById("odt").style.display = "none"
document.getElementById("vp").style.display = "block"
document.getElementById("cp").style.display = "none"
break;
case "c-p":
document.getElementById("odt").style.display = "none"
document.getElementById("vp").style.display = "none"
document.getElementById("cp").style.display = "block"
break;
}
}
</script>

So when someone clicks for example o-d-t, the other 2 select menus hide, but I want them not only to hide but to also change any selected option the user may have changed back to the first option with an empty value, just so I don't send unnecessary data to the DB...

I have tried document.getElementById("vp").selectedIndex = 0 and several other methods I've found on line but my luck has been pretty bad.

Could anybody give me the correct method please? Thank in advance for any help provided.

[rainborick]

When I've worked with selectedIndex in the past, I've always done it the old way by using form.options or form.element. So I experimented and found you can, of course, get the <select> element object with getElementById and read and write the selectedIndex value as you've done.

Without seeing the HTML for your page, it's impossible to know for sure why your code fails, but my first thought is that the <select> tag itself doesn't have an id attribute, just a name attribute.

[Fotiman]

You've got a lot of duplicated code there (document.getElementById repeated over and over) which increases the odds for human error. You could clean that up by doing something like this (and don't forget your semi colons):

<script type="text/javascript"> 
function change() { 
  var odt = document.getElementById('odt'),
    vp = document.getElementById('vp'),
    cp = document.getElementById('cp');
  switch (document.getElementById("tt").value) { 
  case "o-d-t": 
    odt.style.display = "block";
    vp.style.display = "none";
    cp.style.display = "none";
    vp.selectedIndex = 0;
    break; 
  case "v-p": 
    odt.style.display = "none";
    vp.style.display = "block";
    cp.style.display = "none";
    break; 
  case "c-p": 
    odt.style.display = "none";
    vp.style.display = "none";
    cp.style.display = "block";
    break; 
  } 
} 
</script>

Otherwise, your usage looks correct.

[daveVk]

Tried setting value ?

document.getElementById("vp").value = "";

[Sub_Seven]

Hello,

I was doing something wrong, I was calling ids and the elements had names, changed it and now it works just fine, thanks for the help :)