javascript - 使用hta根据第一个选择列表框更改第二个列表框 - Thinbug

使用hta根据第一个选择列表框更改第二个列表框

时间：2018-09-12 10:12:10

标签： javascript html vbscript hta

我有两个基于第一列表框值的列表框，我想在第二个列表框中选择值。示例-当我在第一个列表框中选择“水果”，然后在第二个列表框中选择“香蕉”，“苹果”和“橙子”时。我对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>

2 个答案:

答案 0 :(得分：1)

您可以尝试使用类似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>

答案 1 :(得分：0)

基于another answer，此代码如何？

<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>