JavaEE開発向けタグライブラリ

select

コンポーネント情報
モジュールim_ui
導入されたバージョン8.0.0
バージョン8.0.0

機能説明

  • セレクトボックスを作成します。
注意事項
  • max-widthを指定するとIE8のみレイアウトが崩れて表示されます。

属性一覧

注釈 属性名 型 説明 省略時の動作 実行時評価
HTML5
Boolean属性 		autofocus Boolean 画面表示時に、セレクトボックスにフォーカスをあてます false
Boolean属性 disabled Boolean セレクトボックスを無効化します false
HTML5
Boolean属性 		hidden Boolean セレクトボタンを非表示にします false
id String セレクトボックスのidです 代替idを付与
list java.util.List<java.util.Map<String, Object>> 選択肢リストを作成します
詳細は optGroup 、 option を参照してください		 -
Boolean属性 multiple Boolean 選択肢を複数選択できるようにします false
name String セレクトボックスのnameです 代替nameを付与
onChange String onChangeイベント時に実行する関数を指定します -
HTML5
Boolean属性 		required Boolean セレクトボックスの選択を必須にします false
size Integer 表示する選択肢の数を指定します false
無害化 width String セレクトボックスの横幅を指定します -
無害化 その他 String ユーザ定義属性です -

サンプル

optgroup

optgroup
  • オプショングループを作成します。
注釈 属性名 型 説明 省略時の動作
disabledBooleanグループを無効化します false
HTML5 hidden Booleanグループを非表示にします false
必須国際化無害化 label String グループの表示名です -
list java.util.List<java.util.Map<String, Object>> 選択肢リストを作成します
詳細は option を参照してください		false
必須 type string “group”を指定します -
無害化 その他 string ユーザ定義属性です -
JSP
<%
List<Map<String, Object>> sampleList = new ArrayList<Map<String, Object>>();
Map<String, Object> sampleGroup = new HashMap<String, Object>();
sampleGroup.put("type", "group");
sampleGroup.put("label", "グループラベル");

List<Map<String, Object>> sampleOptionList = new ArrayList<Map<String, Object>>();
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル1");
    map.put("value","value1");
    sampleOptionList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル2");
    map.put("value","value2");
    sampleOptionList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル3");
    map.put("value","value3");
    sampleOptionList.add(map);
}
sampleGroup.put("list", sampleOptionList);
sampleList.add(sampleGroup);

{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル4");
    map.put("value","value4");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル5");
    map.put("value","value5");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル5");
    map.put("value","value5");
    sampleList.add(map);
}
%>

<imui:select list="<%= sampleList %>" />

option

option
  • オプションを作成します。
注釈 属性名 型 説明 省略時の動作
disabledBooleanオプションを無効にします false
HTML5 hidden Booleanオプションを非表示にします false
国際化無害化 label String オプションの表示名です 空文字
selectedBoolean画面表示時にオプションを選択状態にしますfalse
無害化 value String フォーム送信時に送信される値です -
無害化 その他 String ユーザ定義属性です -
JSP
<%
List<Map<String, Object>> sampleList = new ArrayList<Map<String, Object>>();
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル1");
    map.put("value", "value1");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル2");
    map.put("value", "value2");
    map.put("selected", "true");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル3");
    map.put("value", "value3");
    map.put("disabled", "true");
    sampleList.add(map);
}
%>

<imui:select list="<%= sampleList %>" />

multiple

multiple
  • 選択肢を複数選択できるようにします。
  • multipleにfalseを指定した場合は、通常のセレクトボックスを表示します。
JSP
<%
List<Map<String, Object>> sampleList = new ArrayList<Map<String, Object>>();
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル1");
    map.put("value","value1");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル2");
    map.put("value","value2");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル3");
    map.put("value","value3");
    sampleList.add(map);
}
%>

<imui:select list="<%= sampleList %>" multiple="multiple" />

onChange

  • onChangeイベント時にクライアントサイドJavaScriptで定義した関数を呼び出します。
JSP
<%
List<Map<String, Object>> sampleList = new ArrayList<Map<String, Object>>();
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル1");
    map.put("value","value1");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル2");
    map.put("value","value2");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル3");
    map.put("value","value3");
    sampleList.add(map);
}
%>

<script type="text/javascript">
  function sampleFunction() {
    alert('label: ' + this.options[this.selectedIndex].text + '\n' +
          'value: ' + this.value);
  }
</script>
<imui:select list="<%= sampleList %>" onChange="sampleFunction" />

replaceメソッド

  • 表示中のリストの中身を書き換える場合に使用します。
  • 引数には追加するリストを以下のoptGroup、option形式で指定します。
  • optGroup
注釈 属性名 型 説明 省略時の動作
disabledbooleanグループを無効化します false
HTML5 hidden booleanグループを非表示にします false
必須国際化無害化 label string グループの表示名です -
list Array 選択肢リストを作成します
詳細はoptionを参照してください		false
必須 type string “group”を指定します -
無害化 その他 string ユーザ定義属性です -
  • option
注釈 属性名 型 説明 省略時の動作
disabledbooleanオプションを無効にします false
HTML5 hidden booleanオプションを非表示にします false
国際化無害化label string オプションの表示名です 空文字
selectedboolean画面表示時にオプションを選択状態にしますfalse
無害化 value string フォーム送信時に送信される値です -
無害化 その他 string ユーザ定義属性です -
JSP
<%
List<Map<String, Object>> sampleList = new ArrayList<Map<String, Object>>();
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル1");
    map.put("value","value1");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル2");
    map.put("value","value2");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル3");
    map.put("value","value3");
    sampleList.add(map);
}
%>

<script type="text/javascript">
  var replaceList = [
    {
      label : "addLabel1",
      value : "addVal1"
    },
    {
      label : "addLabel2",
      value : "addVal2",
      selected : true
    },
    {
      label : "addLabel3",
      value : "addVal3",
      disabled : true
    },
    {
      type : "group",
      label : "addLabelGroup",
      list : [
        {
          label : "addLabel4",
          value : "addVal4"
        }
      ]
    }
  ];
  $(function() {
    $("#replaceButton").bind("click", function() {
      $('#replaceSample').imuiSelect('replace', replaceList);
    });
  });
</script>
<imui:select id="replaceSample" list="<%=sampleList %>" />
<imui:button id="replaceButton" value="項目書き換え" class="imui-button"/>

addメソッド

  • 表示中のリストの中身を追加する場合に使用します。
  • 引数には新たに表示するリストを指定します。
  • 指定する形式については こちら を参照してください。
JSP
<%
List<Map<String, Object>> sampleList = new ArrayList<Map<String, Object>>();
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル1");
    map.put("value","value1");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル2");
    map.put("value","value2");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル3");
    map.put("value","value3");
    sampleList.add(map);
}
%>

<script type="text/javascript">
  var addList = [
    {
      label : "addLabel1",
      value : "addVal1"
    },
    {
      label : "addLabel2",
      value : "addVal2",
      selected : true
    },
    {
      label : "addLabel3",
      value : "addVal3",
      disabled : true
    },
    {
      type : "group",
      label : "addLabelGroup",
      list : [
        {
          label : "addLabel4",
          value : "addVal4"
        }
      ]
    }
  ];
  $(function() {
    $("#addButton").bind("click", function() {
      $('#addSample').imuiSelect('add', addList);
    });
  });
</script>

<imui:select id="addSample" list="<%=sampleList %>" />
<imui:button id="addButton" value="項目追加" class="imui-button"/>

removeメソッド

  • 表示中のリストの中身を削除する場合に使用します。
  • 引数には削除したいリストを指定します。
  • 指定する形式については こちら を参照してください。
JSP
<%
List<Map<String, Object>> sampleList = new ArrayList<Map<String, Object>>();
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル1");
    map.put("value","value1");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル2");
    map.put("value","value2");
    sampleList.add(map);
}
{
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("label", "ラベル3");
    map.put("value","value3");
    sampleList.add(map);
}
%>

<script type="text/javascript">
  var deleteList = [
    {
      label : "ラベル1",
      value : "value1"
    },
    {
      label : "ラベル3",
      value : "value3"
    }
  ];

  $(function() {
    $("#deleteButton").bind("click", function() {
      $('#deleteSample').imuiSelect('remove', deleteList);
    });
  });
</script>

<imui:select id="deleteSample" list="<%=sampleList %>" />
<imui:button id="deleteButton" value="項目削除" class="imui-button"/>

Copyright © 2012 NTT DATA INTRAMART CORPORATION