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

Question

我希望在我的html网站上有一个像下面的img一样的组合框。我想获取所选值并打印出来。我该如何创建这个comboBox？我尝试过Google API Visualization CategoryFilter Control。但你无法自定义谷歌控制。

谢谢

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，以便我们稍后可以调用它来从列表中删除。它还使我们能够检查并确定列表中尚不存在该值。