Select

Selectのモジュール

詳しい導入事例は導入方法を参照してください。

  • DEMO
  • ラベル表示

説明

説明

使い方

JSで使用するので+-.form-wrap-+に[slct]のクラス必須。

  • HTML

    
    

      
description

必須設定

+-.form-wrap-+に+-.req-+クラス追加でrequirednの設定になります。
*-select-*にはJSでrequiredを追加します。

  • DEMO

自動生成用コード

上記のややこしいHTMLをScriptで自動生成します

設置したい場所に下記の*-input-*を設置して、任意の値を入れてください。

  • HTML
<input class="dataset-slct"
    data-id=""
    name=""
    data-item=""
    data-val=""
    data-select=""
    data-title=""
    data-dsc=""
    data-class=""
  type="hidden">
  • [data-id] id属性を指定
  • [name] name属性を指定
  • [data-item] 表示用の名称：カンマ区切りで複数入力（例："あ,い,う,え"）
  • [data-val]valueに入る値 ：カンマ区切りで複数入力（例："a,b,c,d"）
  • [data-select] 初期セレクトの対象：data-valの値を指定（例："b"）
  • [data-title] labelに入る名前指定
  • [data-dsc] 説明文指定
  • [data-class] オプション用のクラスやオリジナルのクラス指定

使用しない属性は削除可能。