【GeneXus Tips】GeneXusで複数選択可能なListBox

2015.12.01
GeneXus JavaScript

お久しぶりです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>'