javascript - 如何在 javascript 中创建具有保存值的组合框（类似于 google CategoryFilter Control）

Question

我想在我的 html 站点上有一个组合框，如下面的 img 所示。我想获取选定的值并打印出来。我怎样才能创建这个组合框？我已经尝试过 Google API Visualization CategoryFilter 控件。但是你不能自定义谷歌控件。

谢谢

Answer 1

我只是像你描述的那样模拟了一个组合框：http: //jsfiddle.net/twwGM/

基本上，您需要使用 JS 来捕获onchange选择框的事件，然后通过从您的函数生成 HTML 字符串，将其值附加到具有特定样式的某个目标区域。将样式保留在 JS 之外，而是通过使用 CSS 类对其进行样式设置。

HTML 标记：

<form>
    <select id="selector">
        <option>Magic</option>
        <option>Canaries</option>
        <option>Unicorns</option>
    </select>
</form>
<div id="target-area"></div>

JS代码

(function () {

    document.getElementById("selector").addEventListener("change", function () {
        var val = this.options[this.selectedIndex].value;
        var genId = val + "-close";
        if (!document.getElementById(genId)) {
            var htmlstr = "<div class='pasted-option'>" + val + "<span id='" + genId + "'>x</span></div>";
            var targetArea = document.getElementById("target-area");
            targetArea.innerHTML += htmlstr;
            var closeButton = document.getElementById(genId);
            closeButton.addEventListener("click", function () {
                var parent = this.parentNode;
                parent.parentNode.removeChild(parent);
            });
        }
    });

}(window));

正如您在代码中看到的那样，我们还根据项目的名称为 span 生成一个 id，以便我们稍后可以调用它以从列表中删除。它还使我们能够检查并确定列表中不存在该值。