次の img のようなコンボボックスを自分の html サイトに配置したいと考えています。選択した値を取得して出力したい。このコンボボックスを作成するにはどうすればよいですか?? Google API Visualization CategoryFilter コントロールを試しました。ただし、Google コントロールをカスタマイズすることはできません。
ありがとうございました
次の img のようなコンボボックスを自分の html サイトに配置したいと考えています。選択した値を取得して出力したい。このコンボボックスを作成するにはどうすればよいですか?? Google API Visualization CategoryFilter コントロールを試しました。ただし、Google コントロールをカスタマイズすることはできません。
ありがとうございました
あなたが説明したようなコンボボックスをモックアップしました: 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 も生成し、後でリストから削除するためにそれを呼び出すことができるようにします。また、値がリスト内にまだ存在していないことを確認して確認することもできます。