javascript - 使用 javascript 或 ajax 弹出窗口显示所选选项

Question

我有一个 HTML 代码，用户可以在其中选择多个选项。当用户选择选项时，所选选项应该使用 ajax 或 div 显示在弹出窗口中...我已经尝试过使用带有复选框的选择框，但这不起作用，并且很难获取参数以供进一步使用Perl CGI 脚本。没有可用的代码。在弹出窗口中获取所选选项的简单方法是什么？我希望选项在被选择时显示在弹出窗口中。

HTML 代码:

<td>Server Name <font color = red>*</font></td>
<td>
    <span title="Press the 'ctrl' key to select multiple servers">
        <select name="serverlist" id="slist" size="4" multiple>
            <option value="" disabled selected>Select servers</option>
            <option>Server 1</option>
            <option>Server 2</option>
            <option>Server 3</option>
            <option>Server 4</option>
            <option>Server 5</option>
        </select>
    </span>
</td>

Answer 1

您可以轻松获取所选选项。您需要首先添加 onchange 事件，然后循环选项并获取所选值。像这样的事情:

<td>Server Name 
    <font color = red>*</font>
</td>
<td>
    <span title="Press the 'ctrl' key to select multiple servers">
        <select name="serverlist" id="slist" onChange="getSelectedServers()" size="4" multiple>
            <option value="" disabled selected>Select servers</option>
            <option>Server 1</option>
            <option>Server 2</option>
            <option>Server 3</option>
            <option>Server 4</option>
            <option>Server 5</option>
        </select>
    </span>
</td>
<div id="displaySelectedServers">

</div>
<script>
    function getSelectedServers() {
        var e = document.getElementById("slist");
        var serversList = '';
        for(var i = 0; i < e.options.length; i++) {
            if (e.options[i].selected) {
                serversList += '| ' + e.options[i].value + ' |';
            }
        }
        document.getElementById("displaySelectedServers").innerHTML = serversList;     
    }
</script>

希望我的回答对您有帮助:)