HTMLでは<select>タグと<option>タグの組み合わせで構成されますが、Dashcodeでは逆に「１つの要素だけ」しかありません。ポップアップメニューの要素に設定をすると、それをもとにして<select>タグと<option>タグを自動生成するようになっているのです。

デザイン部分にドラッグ＆ドロップして配置すると、デフォルトで３つの項目が組み込まれた状態になっています。この項目は、パレットの「属性」ボタンの表示で編集することができます。

ポップアップメニューを選択すると、パレットの下部に、表示する項目がリストとしてまとめられ表示されます。その下にある「＋」「ー」ボタンを使って項目を追加・削除することができます。またリストに表示されている項目は、そのテキスト部分をダブルクリックすると編集できるようになります。こうして項目を追加し、表示を編集していくことで、ポップアップに表示されるリストを作詞していきます。

各項目は、「ラベル」と「値」から構成されます。ラベルは、実際に画面上に表示されるテキストです。値は、その項目が選択されたとき、JavaScriptのvalueで取得される値です。両者は同じ値にしておくことも出来ますし、表示テキストとは異なる値にも指定できます。

このポップアップは、iPhoneではクリックすると自動的に選択リストが現れるような仕組みになっています。まぁ、基本的にHTMLの<select>タグをそのまま生成されるだけですので、扱い方に悩むこともないでしょう。

下に、ごく簡単なポップアップの利用例をあげておきましょう。これはid="text1"というテキスト、id="popup1"というポップアップメニュー、そしてプッシュボタンから構成されています。ポップアップから適当な項目を選び、ボタンを押すと、どの項目が選択されているかをテキストに表示します。

ここでは、document.getElementByIdでポップアップメニューのDOMオブジェクトを取得しています。ポップアップメニューのIDを指定すると、そのIDの<select>タグが生成されるため、このようにgetElementByIdでオブジェクトを取得し、「value」プロパティで現在選択されている項目の値を取り出すことができるわけです。このvalueで得られる値は、属性パレットで作成した項目の「値」に設定されたテキストになります。

function button1Click(event)
{
	var pop1 = document.getElementById("popup1");
	var msg = "select: " + pop1.value;
	var text1 = document.getElementById("text1");
	text1.innerHTML = msg;
}