Hi I have some code here that fills a dropdown box from an array depending on what is selected in another dropdown box. One of them is disabled, and i would like to stop that once an option has been selected.

This is the Javascript:

function fillStates(opt){
  s=document.f.states.options
  s.length=stateNames[opt].length
  for(i=0;i<s.length;i++){
    s[i].value=stateNames[opt][i]
    s[i].text=stateNames[opt][i]
  }
  document.f.states.selectedIndex=0
}

and the html

<form name="f">
<select name=countries onChange="fillStates(this.options[this.selectedIndex].value)">
  <? echo $optionc; ?>
</select>
<select name=states disabled="disabled">
  <option>Choose a country first</option>
</select>
</form>

if anyone could give me a way to remove the disabled part on the second box once an option in the first box has been selected I would be grateful.

Thanks

<listbox>.disabled = false

document.getElementById('states').disabled=false;

document.getElementById('states').disabled=false;

That won't work. The selectbox doesn't have an ID, set the ID to states then do the above for it to work.

thanks guys, this is how i fixed it:

if (opt=="none"){document.f.states.disabled=true}
  else {document.f.states.disabled=false}

That won't work. The selectbox doesn't have an ID, set the ID to states then do the above for it to work.

yes shawnCplus is right! change name to id or just simply add id as in:
<select name="states" id="states">

Otherwise you would have to use the getElementsByName() method to get all the elements with the name "states".

> Otherwise you would have to use the getElementsByName() method to get all the elements
> with the name "states".
Or simply document.forms[0].elements["states"].disabled = false; which is the correct way of handling form elements.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.