Use hta to change a second listbox based on the first select listbox

Question

I have two listbox based on frist listbox value i want to select value in 2nd listbox. example-when i select Fruit in first list box then in 2nd list box there should Banana,Apple and Orange.I am very new to hta.

<html>
<head>
<title></title>
<HTA:APPLICATION
  APPLICATIONNAME=""
  ID=""
  VERSION="1.0"/>
</head>
<body bgcolor="white">
<select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>
<select name="select2" id="select2">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
</select>
</body>
</html>

score 1 · Accepted Answer · answered Sep 12 '18 at 13:51

You can try something like this HTA :

<html>
<Title>Use hta to change a second listbox based on the first select listbox</Title>
<head>
<HTA:APPLICATION
  APPLICATIONNAME=""
  ID=""
  VERSION="1.0"/>
</head>
<SCRIPT Language="VBScript">
Option Explicit
Dim Categories,Animals,Birds,Cars,Fruits,objOption
Categories = Array("Animals","Birds","Cars","Fruits")
Animals = Array("Bear","Fox","Wolf")
Birds   = Array("Eagle","Hawk","Owl")
Cars    = Array("Audi","BMW","Mercedes","Toyota")
Fruits  = Array("Apple","Banana","Orange")
'-----------------------------------------------------------
Sub Window_Onload()
    Fill_All_Categories()
    Filter_by_Categorie(Select1.Value)
End Sub
'----------------------------------------------------------
Sub Fill_All_Categories()
    Dim Cat
    For Each Cat In Categories
        Set objOption = Document.createElement("OPTION")
        objOption.Text = Cat
        objOption.Value = Cat
        SelectAll.Add(objOption)
    Next
End Sub
'----------------------------------------------------------
Sub Filter_by_Categorie(All)
    Dim Animal,Bird,Car,Fruit
    ClearListbox
    All = selectAll.Value
    Select Case All
    Case "Animals"
        For Each Animal In Animals
            Set objOption = Document.createElement("OPTION")
            objOption.Text = Animal
            objOption.Value = Animal
            Select1.Add(objOption)
        Next
    Case "Birds"
        For Each Bird In Birds
            Set objOption = Document.createElement("OPTION")
            objOption.Text = Bird
            objOption.Value = Bird
            Select1.Add(objOption)
        Next
    Case "Cars"
        For Each Car In Cars
            Set objOption = Document.createElement("OPTION")
            objOption.Text = Car
            objOption.Value = Car
            Select1.Add(objOption)
        Next
    Case "Fruits"
        For Each Fruit In Fruits
            Set objOption = Document.createElement("OPTION")
            objOption.Text = Fruit
            objOption.Value = Fruit
            Select1.Add(objOption)
        Next
    End Select
End sub
'---------------------------------------------------------
Sub ClearListbox()
    For Each objOption in Select1.Options
        objOption.RemoveNode
    Next 
End Sub
'--------------------------------------------------------
</script>
<select name="SelectAll" id="SelectAll" OnChange="Filter_by_Categorie(Select1.Value)"></select>
<select name="Select1" id="Select1"></select>
</body>
</html>

Hi Jirka Jr and Hackoo thanks for the reply,@Hackoo you code work fine:) thanks for your great help!!!! — saransh, Sep 13 '18 at 03:57

score 0 · Answer 2 · answered Sep 12 '18 at 12:47

based on another answer what about this code?

<html>
<head>
<title></title>
<HTA:APPLICATION
  APPLICATIONNAME=""
  ID=""
  VERSION="1.0"/>
</head>
<body bgcolor="white">
<select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>
<select name="select2" id="select2">
    <option value="-1">Select the Fruit you want</option>
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
</select>
<script type="text/javascript">
document.getElementById('select1').onchange=function(){

  var select1 = document.getElementById('select1');
  var select2 = document.getElementById('select2');
  var options1 = select1.getElementsByTagName('option');
  var options2 = select2.getElementsByTagName('option');

  var optCount = options2.length;

  for ( var i = 0; i < optCount; i++) {

    if (options2[i].getAttribute('value') === select1.value) {
      options2[i].style.display = 'block'
    } else if (options2[i].getAttribute('value') != -1) {
      options2[i].style.display = 'none'
    } else {
      options2[i].label = 'Select the ' + options1[select1.value-1].label + ' you want';
    }

    select2.value =-1;
  }

}
</script>
</body>
</html>

sorry, i wrote it for non-ie browsers ...Hackoo's answer is the right one — Jirka Jr, Sep 12 '18 at 14:19

Use hta to change a second listbox based on the first select listbox

2 Answers2