HTA开发：如何实现下拉框控制元素的隐藏与显示？

Hey there! Let's get your HTA script working exactly how you want it to. I'll break down solutions to both your questions and fix the kinks in your existing code.

1. Hiding the Custom Time Area Initially #

To make the prompt text and textbox hidden when the script first loads, just add an inline style attribute to your containing span element that sets display: none. This completely hides the area (and doesn't reserve empty space for it) until you need it. visibility: hidden works too, but it keeps the space occupied even when hidden—display: none is cleaner for this use case.

2. Controlling Display Based on Dropdown Selection #

Right now, your visibility logic only runs when the "START" button is clicked. You want this to trigger immediately when the user picks an option from the dropdown. Here's how to fix that:

• Add an onchange event to your dropdown menu that calls a function to handle visibility.
• Fix the critical typo in your code: visable should be visible (this is why your current code wasn't showing the custom area!).
• Use getElementById to target elements reliably (it's more consistent than relying on names alone in HTA).

Corrected Full Code #

<!DOCTYPE html>
<html>
<head>
    <title>Delay Timer HTA</title>
    <HTA:APPLICATION 
        ID="DelayTimer"
        APPLICATIONNAME="DelayTimer"
        SCROLL="no"
        SINGLEINSTANCE="yes"
    />
</head>
<BODY>
    <SCRIPT LANGUAGE="VBScript">
        Set wshShell = CreateObject("WScript.Shell")
        Dim Timerdelay

        ' Handles visibility and delay value when dropdown selection changes
        Sub UpdateCustomTimeVisibility()
            Dim selectedText
            selectedText = document.getElementById("delayDropdown").value
            
            Select Case selectedText
                Case "1 Second", "3 Seconds", "5 Seconds", "30 Seconds", "0.5 Seconds"
                    ' Hide custom time area
                    document.getElementById("customTimeContainer").style.display = "none"
                    ' Set matching timer delay
                    Select Case selectedText
                        Case "1 Second": Timerdelay = 1000
                        Case "3 Seconds": Timerdelay = 3000
                        Case "5 Seconds": Timerdelay = 5000
                        Case "30 Seconds": Timerdelay = 30000
                        Case "0.5 Seconds": Timerdelay = 500
                    End Select
                Case "Custom"
                    ' Show custom time area
                    document.getElementById("customTimeContainer").style.display = "block"
                    ' Reset delay until user enters a value
                    Timerdelay = Empty
            End Select
        End Sub

        Sub btn01_OnClick
            ' Grab custom value if selected, with validation
            If document.getElementById("delayDropdown").value = "Custom" Then
                If IsNumeric(document.getElementById("CustomTime").value) Then
                    Timerdelay = CInt(document.getElementById("CustomTime").value)
                Else
                    MsgBox "Please enter a valid number of milliseconds!", vbExclamation
                    Exit Sub
                End If
            End If
            
            ' Add your actual timer logic here (e.g., wait and execute your action)
            MsgBox "Timer delay set to " & Timerdelay & " milliseconds!", vbInformation
        End Sub
    </SCRIPT>

    <!-- Dropdown Menu with OnChange Trigger -->
    <select id="delayDropdown" onchange="UpdateCustomTimeVisibility()">
        <option value="1 Second">1 Second</option>
        <option value="3 Seconds">3 Seconds</option>
        <option value="5 Seconds">5 Seconds</option>
        <option value="30 Seconds">30 Seconds</option>
        <option value="0.5 Seconds">0.5 Seconds</option>
        <option value="Custom">Custom</option>
    </select>

    <!-- Custom Time Area (Initially Hidden) -->
    <span id="customTimeContainer" style="display: none;">
        <p>Enter Your Time Delay In Milliseconds</p>
        <input type="text" id="CustomTime" size="30">
    </span>

    <Input Type = "Button" Name = "btn01" VALUE = "START">
</BODY>
</html>

Key Improvements Explained: #

• Initial Hidden State: The customTimeContainer span uses style="display: none" in the HTML, so it's hidden on load.
• Instant Visibility Updates: The dropdown's onchange event triggers the visibility logic right when the user selects an option.
• Fixed Typo: Replaced visable with the correct visible (or switched to display for more intuitive hiding/showing).
• Reliable Element Targeting: getElementById ensures we're always accessing the right elements, no ambiguity.
• Input Validation: Added a check to make sure the user enters a valid number for custom delays, preventing errors.

内容的提问来源于stack exchange，提问作者Dankman69