如何在HTA中实现单下拉选框多值？现有VBScript多电脑管控HTA优化

Great question! When you need each dropdown option to carry multiple pieces of data (like MAC address for Wake-on-LAN, hostname for restart/shutdown), using HTML5 data attributes is the cleanest, most maintainable approach. Here's how to implement this in your HTA:

Step 1: Update the Dropdown with Custom Data Attributes #

Modify your <select> and <option> elements to include data-* attributes for each value you need. For example, if you need a MAC address (for wake-on-LAN) and hostname (for remote restart/shutdown), add data-mac and data-hostname:

<select name="Control_PC" id="Control_PC">
    <option value="0" selected>Select Computer</option>
    <option value="1" data-mac="AA:BB:CC:DD:EE:FF" data-hostname="PC1">PC1</option>
    <option value="2" data-mac="11:22:33:44:55:66" data-hostname="PC2">PC2</option>
    <option value="3" data-mac="99:88:77:66:55:44" data-hostname="PC3">PC3</option>
</select>

<input type="button" value="WAKE UP" onclick="executeWake()">
<input type="button" value="RESTART" onclick="executeRestart()">
<input type="button" value="SHUTDOWN" onclick="executeShutdown()">

(Note: I added an id to the select for easier JavaScript access—this is optional but makes your code cleaner.)

Step 2: Retrieve Multiple Values in JavaScript #

Create a helper function to fetch the selected option's data attributes, then use those values in your action functions:

// Helper to get selected computer's data
function getSelectedComputer() {
    const select = document.getElementById('Control_PC');
    const selectedOption = select.options[select.selectedIndex];
    
    return {
        id: selectedOption.value,
        mac: selectedOption.dataset.mac,
        hostname: selectedOption.dataset.hostname,
        isValid: selectedOption.value !== "0" // Check if a PC was actually selected
    };
}

// Wake-on-LAN function
function executeWake() {
    const pc = getSelectedComputer();
    if (!pc.isValid) {
        alert("Please select a computer first!");
        return;
    }
    
    // Replace with actual WOL logic (requires sending a magic packet)
    alert(`Waking up ${pc.hostname} (MAC: ${pc.mac})`);
    // Example WOL code might use ActiveX objects like WScript.Shell or a network library
}

// Remote restart function
function executeRestart() {
    const pc = getSelectedComputer();
    if (!pc.isValid) {
        alert("Please select a computer first!");
        return;
    }
    
    // Use Windows shutdown.exe for remote restart
    const shell = new ActiveXObject("WScript.Shell");
    shell.Run(`shutdown /r /m \\\\${pc.hostname} /t 0 /f`, 0, false);
    alert(`Initiating restart for ${pc.hostname}...`);
}

// Remote shutdown function
function executeShutdown() {
    const pc = getSelectedComputer();
    if (!pc.isValid) {
        alert("Please select a computer first!");
        return;
    }
    
    // Use Windows shutdown.exe for remote shutdown
    const shell = new ActiveXObject("WScript.Shell");
    shell.Run(`shutdown /s /m \\\\${pc.hostname} /t 0 /f`, 0, false);
    alert(`Initiating shutdown for ${pc.hostname}...`);
}

Why This Works: #

• Data attributes (data-*) are standard HTML and fully supported in HTA (since it uses the IE rendering engine, which supports this from IE8 onwards).
• You can add as many data-* attributes as you need (e.g., data-ip, data-location) without cluttering the value attribute.
• The dataset property in JavaScript lets you access these values cleanly—no messy string parsing required.

Alternative: Using JSON in the Value Attribute #

If you prefer not to use data attributes, you can store a JSON string in the value attribute. Here's a quick example:

<option value='{"id":1,"mac":"AA:BB:CC:DD:EE:FF","hostname":"PC1"}'>PC1</option>

Retrieve it like this:

function getSelectedComputer() {
    const select = document.getElementById('Control_PC');
    const selectedValue = select.value;
    if (selectedValue === "0") {
        return { isValid: false };
    }
    return { ...JSON.parse(selectedValue), isValid: true };
}

This works too, but data attributes are more readable and easier to edit directly in HTML.

Just make sure your HTA includes these meta tags to ensure modern HTML support:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>PC Control HTA</title>
    <hta:application id="PCControl" border="thin" caption="yes" />
</head>
<body>
    <!-- Your HTML here -->
</body>
</html>

Let me know if you need help refining the Wake-on-LAN logic—sending magic packets requires a bit more code with ActiveX or a lightweight network component!

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