Auto Linked Option Listbox without button : Option Select ComboBox : Form Control JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » Form Control » Option Select ComboBox »

 

Auto Linked Option Listbox without button



<HTML>
<HEAD>
<TITLE>multiselect.html</TITLE>
<SCRIPT>
<!--
var languages = ['English', 'Spanish'];
var days = [['Monday', 'Tuesday', 'Wednesday'],
        ['lunes', 'martes', 'miercoles']];
var numbers = [['one', 'two', 'three'],
           ['uno', 'dos', 'tres']];
var zodiac = [['Aries', 'Taurus', 'Gemini'],
          ['Aries', 'Tauro', 'Geminis']];

function updateList(formObject) {
  if(formObject.Languages.selectedIndex == -|| formObject.Groups.selectedIndex == -1) { 
    return;
    }
  var langIdx = formObject.Languages.selectedIndex;
  var groupIdx = formObject.Groups.selectedIndex;
  var arrayName = formObject.Groups.options[groupIdx].text;
  arrayName = arrayName.toLowerCase();

  var translate = document.Lists.Translation;
  for (var i = 0; i < translate.length; i++) {
    var item = eval(arrayName + '[' + langIdx + ']');
    if (i < item.length) {  
      translate.options[i].text = item[i];
    }else {
      translate.options[i].text = '';
    }
  }
}
       
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Lists">
<TABLE BORDER="1" CELLSPACING=1>
  <TR>
    <TD VALIGN="TOP">
      <B>Language</B>
      <BR>
      <SELECT NAME="Languages" SIZE="2" onChange="updateList(this.form);">
      <OPTION>English
      <OPTION>Spanish
      </SELECT>
      <BR><BR><BR>
      <B>Group</B>
      <BR>
      <SELECT NAME="Groups" SIZE="3" onChange="updateList(this.form);">
      <OPTION>Numbers
      <OPTION>Days
      <OPTION>Zodiac
      </SELECT>
      <BR><BR>
    </TD>
    <TD VALIGN="TOP">
      <B>Translation</B>
      <BR>
      <SELECT NAME="Translation" SIZE="12">
      <OPTION>
      <OPTION>
      <OPTION>
      </SELECT>
    </TD>
  </TR>
</TABLE>
</FORM>

</BODY>
</HTML>


           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo Form Control
» Option Select ComboBox