CFSELECT  
説明

ドロップダウンリストボックスのフォームコントロールを構築します。cfform タグ内で使用します。クエリーから、または HTML option タグを使用して、リストにデータを挿入できます。

 
カテゴリ

フォームタグ

 
シンタックス
<cfselect
   name = "name"
label = "label"
style = "style specification"
   size = "integer"
   required = "yes"、"no"
   message = "text"
   onError = "text"
   multiple = "yes"、"no"
   query = "queryname"
   value = "text"
   display = "text">
   group = "query column name
   queryPosition = "above"、"below"
   selected = "value or list"
onKeyUp = "JavaScript or ActionScript"
onKeyDown = "JavaScript or ActionScript"
onMouseUp = "JavaScript or ActionScript"
onMouseDown = "JavaScript or ActionScript"
onChange = "JavaScript or ActionScript"
onClick = "JavaScript or ActionScript"
visible = "Yes"、"No"
enabled = "Yes"、"No"
tooltip = "tip text"
height = "number of pixels" Flash の場合のみ
width = "number of pixels" Flash の場合のみ
>
HTML オプションタグ (省略可能)
</cfselect>
 
関連項目

cfapplet、cfcalendar、cfform、cfformgroup、cfformitem、cfgrid、cfinput、cfslider、cftextarea、cftree、『ColdFusion MX 開発ガイド』の第26章の「データの取得および形式設定について」

 
ヒストリ

ColdFusion MX 7:

  • selected 属性に対して複数の値を指定できるようになりました。
  • passthrough 属性は使用禁止になりました。すべての HTML select タグ属性を直接サポートするようになりました。
  • 接頭辞 on が付いた属性が追加されました。
  • enabled、group、height、label、queryPosition、tooltip、visible、および width の各属性が追加されました。

次の表は、ColdFusion が直接使用する属性のリストです。このリストに記載されていない HTML select タグ属性もすべてサポートされ、ブラウザに直接渡されます。

メモ: "Flash の場合のみ" と記載されている属性は、ColdFusion MX を使用して提供されるスキンでは処理されません。ただし、これらの属性は生成された XML に含まれます。

メモ: "Flash の場合のみ" と記載されている属性は、ColdFusion MX を使用して提供されるスキンでは処理されません。ただし、これらの属性は生成された XML に含まれます。
 
使用方法

このタグには終了タグが必要で、HTML option 子タグおよび optgroup 子タグを含めることができます。

選択したリストボックスの項目をポストバック全体にわたって確実に保持するには、cfform の preserveData 属性をクエリーから生成されたリストと共に使用します (この方法は、クエリーから挿入されたデータでのみ機能します)。

cfform の preserveData 属性が true でフォームが同じページに送信される場合に、コントロール用のデータがクエリーから挿入されると、cfselect コントロール用に送信された選択肢が Selected 属性の値の代わりに使用されます。正規の HTML の option タグが挿入されるコントロールの場合、開発者は Selected 属性を適切な option タグに動的に追加する必要があります。

group オプションでは、SQL GROUP BY シンタックスを使用したクエリーが生成され、group 列のフィールド名の下にあるインデントされたリストに各グループの value 列エントリが配置されます。このオプションにより、各エントリの HTML optgroup タグが group 列に生成されます。

</option> 終了タグがある cfselect タグ本文内の各 HTML option タグを閉じます。このタグを閉じないで queryPosition="below" を指定した場合、クエリーからの最初の項目がリストに表示されないことがあります。

このタグを正しく動作させるには、JavaScript 対応のブラウザを使用する必要があります。

詳細については、cfform タグのエントリを参照してください。

 

次の例では、部門別にグループ化された全従業員のリストから 1 人以上の従業員名を選択します。選択した名前とその従業員の電子メールアドレスが表示されます。全従業員のデータを取得するオプションもあります。

<!--- 従業員名をデータベースから取得します。 --->
<!--- SQL を使用して、姓名を指定する Name フィールドを作成します。 --->
<cfquery name = "GetAllEmployees" dataSource = "cfdocexamples"
      cachedwithin="#createTimeSpan(0,1,0,0)#">
   SELECT Emp_ID, EMail, Phone, Department, FirstName, LastName, FirstName +' '
      +lastName as Name
   FROM Employees
   GROUP BY Department, Emp_ID, EMail, Phone, FirstName, LastName, FirstName
</cfquery>


<h2>cfselect の例</h2>
<!-- フォームが送信された場合、cfif ステートメントは true です。
   選択した名前を示します。 --->
<cfif IsDefined("form.employeeid")>
   <!--- フォームは送信されました。 --->
   <h4>次の従業員を選択しました。</h3>
   <cfif form.employeeid IS "">
      <!--- [すべてを選択] オプションを選択しました。全従業員を表示します。 --->
      <cfoutput query="GetAllEmployees">
         #name#<br>
         Email:#email#<br><br>
      </cfoutput>
   <cfelse>
      <!--- クエリーオブクエリーを使用して、選択したユーザーのデータを取得します。 
         Form.employeeid は、選択した従業員 ID のカンマ区切りリストです。 --->
      <cfquery name = "GetSelectedEmployees" dbtype="query">
         SELECT Emp_ID, EMail, Phone, Department, FirstName, LastName, FirstName
            +' ' +lastName as Name
         FROM   GetAllEmployees
         WHERE Emp_ID in (#form.employeeid#)
      </cfquery>   
      <!--- クエリーから名前と電子メールアドレスを表示します。 --->
      <cfoutput query="GetSelectedEmployees">
         #firstName# #lastName#<br>
         Email:#email#<br>
         <br>
      </cfoutput>
   </cfif> 
</cfif>

<!--- cfform タグで現在のページに戻ります。 --->
<h3>従業員を 1 人以上選択します。</h3>
<cfform action = "#CGI.SCRIPT_NAME#">
   <!--- cfselect を使用して、部門別にグループ化された、クエリーの LastName 列を表示します。 
      複数選択が可能です。--->
   <cfselect
      name = "employeeid" 
      size = "15" 
      multiple="yes" 
      required = "Yes"
      message = "Select one or more employee names" 
      query = "GetAllEmployees" 
      group="Department"
      display ="name" 
      value ="emp_id" 
      queryPosition="Below">
      <!--- 全従業員を選択するオプションを追加します。 --->
      <option value = "">Select All</option>
   </cfselect><br><br>
   <input type="Submit">
</cfform> 
NAME  
  必須
 
  すべて
 

選択フォーム要素の名前です。

LABEL  
  オプション
 
  Flash および XML
 

Flash または XML 形式のフォーム内でコントロールの横に配置するラベルです。

STYLE  
  オプション
 
  すべて
 

HTML または XML 形式フォームでは、ColdFusion は style 属性をブラウザまたは XML に渡します。

Flash 形式では、対応する Flash 要素について、Macromedia Flex で使用するものと同じシンタックスおよびコンテンツを使用する CSS 形式のスタイル仕様でなければなりません。

SIZE  
  オプション
 
  すべて
 
Default value: "1"

一度に表示するエントリの数です。デフォルト値の 1 では、ドロップダウンリストが表示されます。それ以外の値を指定すると、size の数のエントリを一度に参照できるリストボックスが表示されます。

REQUIRED  
  オプション
 
  すべて
 
Default value: "No"
  • Yes: フォームを送信するときにリスト要素を選択する必要があります。

メモ : size 属性を省略した場合や、値を 1 に設定した場合は、表示されている項目が常に送信されるので、この属性の設定は無効になります。value=" " (引用符の間に空白文字があることに注意してください) である初期 option タグを使用することにより、この形式フォームの問題を解決できます。

  • No
MESSAGE  
  オプション
 
  すべて
 

required = "Yes" の場合で選択が行われていないときに表示されるメッセージです。

ONERROR  
  オプション
 
  HTML および XML
 

検証に失敗した場合に実行するカスタム JavaScript 関数です。

MULTIPLE  
  オプション
 
  すべて
 
Default value: "No"
  • Yes: ドロップダウンリスト内の複数の要素を選択できます。
  • No
QUERY  
  オプション
 
  すべて
 

ドロップダウンリストに挿入するクエリーの名前です。

VALUE  
  オプション
 
  すべて
 

各リスト要素の値に使用するクエリー列です。query 属性と共に使用します。

DISPLAY  
  オプション
 
  すべて
 
Default value: "value 属性の値"

各リスト要素の表示ラベルに使用するクエリー列です。query 属性と共に使用します。

GROUP  
  オプション HTML および XML
 

ドロップダウンリスト内の項目を 2 つのレベルで構成された階層型のリストにグループ化するために使用するクエリー列です。

QUERYPOSITION  
  オプション
 
  すべて
 
Default value: "above"

オプションリストにクエリーを挿入し、HTML option 子タグを使用して追加エントリを指定する場合は、option タグの項目に関連するクエリーから、その項目の場所を判断します。

  • above: クエリー項目を options 項目の上に配置します。
  • below: クエリー項目を options 項目の下に配置します。
SELECTED  
  オプション
 
  すべて
 

選択リストであらかじめ選択しておく 1 つ以上のオプション値です。複数の値を指定するには、カンマ区切りのリストを使用します。この属性は、選択リスト項目がクエリーから生成される場合のみ適用されます。cfform preservedata 属性の値でこの値を上書きできます。

ONKEYUP  
  オプション
 
  すべて
 

ユーザーがコントロールでキーボードのキーを離したときに実行される JavaScript (HTML/XML の場合) または ActionScript (Flash の場合) です。

ONKEYDOWN  
  オプション
 
  すべて
 

ユーザーがコントロールでキーボードのキーを押したときに実行される JavaScript (HTML/XML の場合) または ActionScript (Flash の場合) です。

ONMOUSEUP  
  オプション
 
  すべて
 

ユーザーがコントロールでマウスボタンを押したときに実行される JavaScript (HTML/XML の場合) または ActionScript (Flash の場合) です。

ONMOUSEDOWN  
  オプション
 
  すべて
 

ユーザーがコントロールでマウスボタンを離したときに実行される JavaScript (HTML/XML の場合) または ActionScript (Flash の場合) です。

ONCHANGE  
  オプション
 
  すべて
 

ユーザーのアクションに応じてコントロールが変わるときに実行される JavaScript (HTML/XML の場合) または ActionScript (Flash の場合) です。

ONCLICK  
  オプション HTML および XML
 

ユーザーがコントロールをクリックしたときに実行される JavaScript です。

ENABLED  
  オプション Flash
 
Default value: "Yes"

コントロールを有効にするかどうかを指定するブール値です。無効なコントロールはライトグレーで表示されます。disabled 属性の逆です。

VISIBLE  
  オプション Flash
 
Default value: "Yes"

コントロールを表示するかどうかを指定するブール値です。表示されないコントロールが使用するスペースは空白です。

TOOLTIP  
  オプション Flash
 

マウスポインタをコントロールの上に置いたときに表示されるテキストです。

HEIGHT  
  オプション Flash
 

コントロールの高さをピクセル単位で指定します。

WIDTH  
  オプション Flash
 

コントロールの幅をピクセル単位で指定します。