0

次の img のようなコンボボックスを自分の html サイトに配置したいと考えています。選択した値を取得して出力したい。このコンボボックスを作成するにはどうすればよいですか?? Google API Visualization CategoryFilter コントロールを試しました。ただし、Google コントロールをカスタマイズすることはできません。

コンボボックス

ありがとうございました

4

1 に答える 1

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

コード内でわかるように、アイテムの名前に基づいてスパンの ID も生成し、後でリストから削除するためにそれを呼び出すことができるようにします。また、値がリスト内にまだ存在していないことを確認して確認することもできます。

于 2013-02-27T14:55:01.713 に答える