[SOLVED] Show additional field when option is selected

[Zergman]

I have a dynamic 3 list box system that was used for a country/state/city.

var states = new Array();

states['Item1'] = new Array('Option1','Option2');
states['Item2'] = new Array('Option1','Option2');
states['Item3'] = new Array('Option1','Option2');

// City lists
var cities = new Array();

cities['Item1'] = new Array();
cities['Item1']['Option1'] = new Array('SubOption1','SubOption2');
cities['Item1']['Option2'] = new Array('SubOption1','SubOption2');

cities['Item2'] = new Array();
cities['Item2']['Option1'] = new Array('SubOption1','SubOption2');
cities['Item2']['Option2'] = new Array('SubOption1','SubOption2');

cities['Item3'] = new Array();
cities['Item3']['Option1'] = new Array('SubOption1','SubOption2');
cities['Item3']['Option2'] = new Array('SubOption1','SubOption2');


function setStates(){

  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');

  stateList = states[cntrySel.value];

  changeSelect(stateSel, stateList);
  setCities();

}

function setCities(){

  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  citySel  = document.getElementById('city');

  cityList = cities[cntrySel.value][stateSel.value];

  changeSelect(citySel, cityList);

}
//**************************************************************************//
// FUNCTION changeSelect(fieldObj, valuesAry, [optTextAry], [selectedVal])
//
//**************************************************************************//
function changeSelect(fieldObj, valuesAry, optTextAry, selectedValue) {

  //Clear the select list
  fieldObj.options.length = 0;

  //Set the option text to the values if not passed
  optTextAry = (optTextAry)?optTextAry:valuesAry;

  //Itterate through the list and create the options
  for (i in valuesAry) {
    selectFlag = (selectedValue && selectedValue==valuesAry[i])?true:false;
    fieldObj.options[fieldObj.length] = new Option(optTextAry[i], valuesAry[i], false, selectFlag);
  }

}

 

Used on page

<select name="country" size="10" class="textareastyle" id="country" onchange="setStates();">
  <option value="Item1">Item1</option>
  <option value="Item2">Item2</option>
  <option value="Item3">Item3</option>
</select>

<select name="state" size="10" class="textareastyle" id="state" onchange="setCities();">
  <option value=""> </option>
</select>

<select name="city" size="10" class="textareastyle" id="city" onchange=" ">
  <option value=""> </option>
</select>

 

What I was asked to do is to have the following textbox only show if SubOption2 was selected.

 

Textbox

<input type="text" name="dslam" id="dslam" class="textboxstyle" value="DSLAM Info" size="32" />

 

Can't figure this out due to the nature of the dynamic list boxes.

[Psycho]

LOL, that's my code!

 

Anyway, which "subOption2" are you talking about? You have a "subOption2" for country, state & city. Would have been helpful if you had provided some real values.

 

If you needed to display/hide based upon city country or state, you could do this:

 

1. First set the initial style for the field to visibility:hidden

<input type="text" style="visibility:hidden;" name="dslam" id="dslam" class="textboxstyle" value="DSLAM Info" size="32" />

 

Then change the setStates function to change on country selection as follows (or setCity if changing based upon state):

function setStates(){

  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');

  //<--START NEW CODE-->
  cntryValue = cntrySel[cntrySel.selectedIndex].value;
  inputVisability = (cntryValue=='SubOption2') ? '': 'hidden';
  document.getElementById('dslam').style.visibility = inputVisability;
  //<--END NEW CODE-->

  stateList = states[cntrySel.value];

  changeSelect(stateSel, stateList);
  setCities();

}

 

^^Not tested

[Zergman]

Hmm, now that I think about it, I believe I did get that code from here LOL!  Thanks mjdamato

 

 

It really doesn't matter apparently which SubOption2 is selected.  In the real code, there are repeats of the same thing in the 3rd box depending on what the first and second boxes are.

 

I was asked that if SubOption2 is selected ... regardless of the first two boxes, to have it open the text box to gather more data.

 

Ill try what you suggested and post back the results.

[Zergman]

I put in the code as you provided and changed SubOption2 to a real value in the app but it seems the dslam box appears fine when the country box option is selected.

 

Is there anyway to change this so the dslam box appears based on whats selected in the state box?

 

[Zergman]

Sorry, was playing around with it but due to my spaz spelling, it wouldn't work lol.

 

Got it now

 

function setCities(){

  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  citySel  = document.getElementById('city');
  
  //<--START NEW CODE-->
  stateValue = stateSel[stateSel.selectedIndex].value;
  inputVisability = (stateValue=='Pixelization') ? '': 'hidden';
  document.getElementById('dslam').style.visibility = inputVisability;
  //<--END NEW CODE-->
  
  cityList = cities[cntrySel.value][stateSel.value];

  changeSelect(citySel, cityList);

}

 

Thanks for the help and code for this