【GeneXus Tips】GeneXusで複数選択可能なListBox - 青森県八戸市のアプリ・システム開発・WEBコンサルティングカンパニー「アイティコワーク」です。

TOP >
お知らせ一覧 >
【GeneXus Tips】GeneXusで複数選択可能なListBox

お久しぶりですkudoです。

皆さんはGeneXusで複数のアイテムを選択させる場合にどのような画面を作成していますでしょうか？
Gridとチェックボックスを利用して選択させていないでしょうか？

自分はGridとチェックボックスを使って選択させています！

でも、WebにはListBoxという複数選択が可能なコントロールがあるではないですか
・・・
・・・・・・
・・・・・・・・・
GeneXusで作成できるListBoxって複数選択できないんですけどね

じゃぁ複数選択可能なListBoxを作っちゃいましょう

<select multiple>
  <option value="1">りんご</option>
  <option value="2">みかん</option>
  <option value="3">バナナ</option>
</select>

</select>

できましたｗ

でも、これだと選択した値をGeneXusで利用することができません。

ならどうするか・・・JSしかないでしょ！

今回は、他の項目と同じようにすぐ値を利用できるよう
ListBox（Selectタグ）のOnChangeを利用してGeneXus側で用意した変数に選択されたアイテムのValueを格納します。

<script type="text/javascript">
    function JSListSelect(){
        var Values = "";
        var ListBox = document.forms["MAINFORM"].elements["JSListBox"].options;
        for(var i = 0; i < ListBox.length; i++){
            if(ListBox[i].selected){
                Values += ListBox[i].value+",";
            }
        }
    document.all.item("%GxValues%").value=Values.substring(0,Values.length-1);
    }
</script>
・
・
・
<select name="JSListBox" class="Attribute" size="5" onchange="JSListSelect()" multiple>'
    <option value="1">リンゴ</option>
    <option value="2">みかん</option>
    <option value="3">バナナ</option>
</select>

function JSListSelect(){

var Values = "";

var ListBox = document.forms["MAINFORM"].elements["JSListBox"].options;

for(var i = 0; i < ListBox.length; i++){

if(ListBox[i].selected){

Values += ListBox[i].value+",";

}

document.all.item("%GxValues%").value=Values.substring(0,Values.length-1);

}

</script>

・

<select name="JSListBox" class="Attribute" size="5" onchange="JSListSelect()" multiple>'

</select>

※%GxValue%にはGeneXusの変数のInternalNameを設定

GeneXusで記述すると以下のような形になります。

// JavaScriptを利用して、自作したリストボックスの値を文字列型の変数に格納する
Form.HeaderRawHTML = '<script type="text/javascript">'
                    + 'function JSListSelect(){'
                        + 'var Values = "";'
                        + 'var ListBox = document.forms["MAINFORM"].elements["JSListBox"].options;'
                        + 'for(var i = 0; i < ListBox.length; i++){'
                            + 'if(ListBox[i].selected){'
                                + 'Values += ListBox[i].value+",";'
                            + '}'
                        + '}'
                    + 'document.all.item("' + &GxValues.InternalName + '").value=Values.substring(0,Values.length-1);'
                    + '}'
                    + '</script>'

// リストボックスに表示するデータを取得
&List = DP_List()

// WebFormに配置したTextBlockに直接HTMLを記述
TB_ListBox.Caption = '<select name="JSListBox" class="Attribute" size="5" onchange="JSListSelect()" multiple>'
For &Item In &List
	TB_ListBox.Caption += '<option value="' + &Item.CD + '">' + &Item.Name + '</option>'
EndFor
TB_ListBox.Caption += '</select>'

// JavaScriptを利用して、自作したリストボックスの値を文字列型の変数に格納する

Form.HeaderRawHTML = '<script type="text/javascript">'

+ 'function JSListSelect(){'

+ 'var Values = "";'

+ 'var ListBox = document.forms["MAINFORM"].elements["JSListBox"].options;'

+ 'for(var i = 0; i < ListBox.length; i++){'

+ 'if(ListBox[i].selected){'

+ 'Values += ListBox[i].value+",";'

+ '}'

+ 'document.all.item("' + &GxValues.InternalName + '").value=Values.substring(0,Values.length-1);'

+ '}'

+ '</script>'

// リストボックスに表示するデータを取得

&List = DP_List()

// WebFormに配置したTextBlockに直接HTMLを記述

TB_ListBox.Caption = '<select name="JSListBox" class="Attribute" size="5" onchange="JSListSelect()" multiple>'

For &Item In &List

TB_ListBox.Caption += '<option value="' + &Item.CD + '">' + &Item.Name + '</option>'

EndFor

TB_ListBox.Caption += '</select>'

※値を利用する場合は、Splitなどを利用て値をCharcter型コレクションに変換して利用してください。

このようなJSを追加するだけで、GeneXusの変数に、選択したアイテムのValueがカンマ区切りで格納されます。
面倒なのでコードの説明は端折りますが、簡単に言うと

ListBoxの値が変わったら、Select内のOptionをチェックして、選択されているアイテムのValueを変数に足しこむ。

ということです。

似たようなことはチェックボックスやラジオボタンでも実装できるので
GeneXusのコントロールに嫌気がさしたら、どうぞお試しあれ

※IsValidとの競合があるかもしれません。
※使用する場合は自己責任でお願いします。