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

我想在我的html站点上有一个组合框，如下面的img。我想得到所选的值并打印出来。如何创建此组合框？？我尝试过谷歌API可视化分类过滤器控件。但是您不能自定义google控件

---

谢谢你

我刚刚模拟了一个组合框，如你所述：

基本上，您需要使用JS捕获select框的

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));

（函数（）{
document.getElementById（“选择器”）.addEventListener（“更改”，函数（）{
var val=this.options[this.selectedIndex].value；
var genId=val+“-关闭”；
如果（！document.getElementById（genId））{
var htmlstr=“”+val+“x”；
var targetArea=document.getElementById（“目标区域”）；
targetArea.innerHTML+=htmlstr；
var closeButton=document.getElementById（genId）；
closeButton.addEventListener（“单击”），函数（）{
var parent=this.parentNode；
parent.parentNode.removeChild（父级）；
});
}
});
}（窗口）；

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