跳轉至內容

XForms/開放式選擇

來自華夏公益教科書

您希望有一個控制元件,它可以在下拉列表中建議一組值,但同時允許使用者輸入自己的值。

只需將屬性 selection="open" 新增到您的 select1 控制元件即可

<xf:select1 ref="my-data" selection="open">

螢幕影像

[編輯 | 編輯原始碼]
將 selection 屬性設定為 open 的 Select1 控制元件

請注意,雖然列出了可能的國家/地區列表,但使用者可以輸入此列表中沒有的任何國家/地區。

XForms 應用程式

[編輯 | 編輯原始碼]

載入 XForms 應用程式

以下示例允許您選擇國家/地區程式碼或輸入您自己的國家/地區程式碼


<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>XForms Select1 Control Using Open Selection</title>
      <style type="text/css"><![CDATA[body {font-family: Helvetica, sans-serif;}]]></style>
        <xf:model>
            <xf:instance xmlns="">
                <data>
                    <CountryCode/>
                </data>
            </xf:instance>
        </xf:model>
   </head>
   <body>
      <p>XForms Select1 control using selection="open"</p>
      <xf:select1 ref="CountryCode" selection="open">
            <xf:label>Country:</xf:label>
            <xf:item>
                <xf:label>USA</xf:label>
                <xf:value>usa</xf:value>
            </xf:item>
            <xf:item>
                <xf:label>Canada</xf:label>
                <xf:value>can</xf:value>
            </xf:item>
            <xf:item>
                <xf:label>Japan</xf:label>
                <xf:value>jpn</xf:value>
            </xf:item>
            <xf:item>
                <xf:label>Mexico</xf:label>
                <xf:value>mex</xf:value>
            </xf:item>
            <xf:item>
                <xf:label>Other</xf:label>
                <xf:value>other</xf:value>
            </xf:item>
       </xf:select1>
       <br/>
       Output: <xf:output ref="CountryCode"/>
   </body>
</html>

您通常希望向使用者建議值以確保資料輸入的一致性。問題是,有時一個小專案列表會有例外,而開放式選擇控制元件允許輸入這些例外情況。

使用此控制元件的一個挑戰是讓使用者知道他們可以輸入例外情況。您可能需要在表單上新增說明性文字,例如“如果此列表中沒有此值,請在此欄位中鍵入”。


下一頁: 選擇 | 上一頁: Select1 下拉列表
首頁: XForms
華夏公益教科書