Help us understand the problem. What is going on with this article?

Visualforce で連動選択リスト

More than 3 years have passed since last update.

結構よくやることだと思うのですが、Visualforce側の書き方を忘れがちなのでメモ

ポイントは
<apex:actionSupport>タグでonchangeイベントを拾う
<apex:actionRegion>タグで他の項目の入力チェックを回避する
の2点です。

まずはVF

DependentSelectList.page
<apex:page controller="DependentSelectListController">
  <apex:form>
    <apex:pageBlock>
      <apex:pageBlockSection columns="1">
        <apex:pageBlockSectionItem>
          <apex:outputLabel value="選択リスト1"/>
          <apex:actionRegion>
            <apex:selectList value="{!selectValue1}" id="selectList1" size="1">
              <apex:selectOptions value="{!selectList1}"/>
              <apex:actionSupport event="onchange" reRender="selectList2"/>
            </apex:selectList>
          </apex:actionRegion>
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem>
          <apex:outputLabel value="選択リスト2"/>
            <apex:selectList value="{!selectValue2}" id="selectList2"
                             size="1" disabled="{!ISBLANK(selectValue1)}">
            <apex:selectOptions value="{!selectList2}"/>
          </apex:selectList>
        </apex:pageBlockSectionItem>
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

選択リスト1の<apex:selectList>タグの中に<apex:actionSupport>タグを入れ、onchangeイベントを拾って選択リスト2を更新するようにしています。

さらに、選択リスト1の<apex:selectList>タグを<apex:actionRegion>タグで囲って、他の項目の入力チェックが動作するのを回避しています。

また、選択リスト2の方は、選択リスト1で値が選択されていない間は、非活性になるようにしています。

続いて、コントローラ

DependentSelectListController.cls
public with sharing class DependentSelectListController {
  public ID selectValue1 {get; set;}
  public ID selectValue2 {get; set;}
  public List<SelectOption> selectList1 {
    get {
      List<SelectOption> selectOptions 
       = new List<SelectOption> { new SelectOption('', '-なし-') };

      for(Example__c e : [
        SELECT ID
             , Name
          FROM Example__c
         WHERE IsValid__c = true
         ORDER BY DisplayOrder__c]
      ) {
        selectOptions.add(new SelectOption(e.ID, e.Name));
      }

      return selectOptions;
    }
  }
  public List<SelectOption> selectList2 {
    get {
      List<SelectOption> selectOptions 
       = new List<SelectOption>{new SelectOption('', '-なし-')};

      for(ExampleChild__c ec : [
        SELECT ID
             , Name
          FROM ExampleChild__c
         WHERE IsValid__c = true
           AND Example__c = :selectValue1
         ORDER BY DisplayOrder__c
      ]) {
        selectOptions.add(new SelectOption(ec.ID, ec.Name));
      }

      return selectOptions;
    }
  }

  public DependentSelectListController() {
  }
}

選択リストの中身は、今回は一番よく使いそうな親子関係にあるオブジェクトを表示する形式にしています。
親レコードを選択リスト1に、その子レコードを選択リスト2にセットします。

余談ですが、Keyに空文字列をセットしたSelectOprionをnewしていますが、VFでこの選択肢を選択した場合にクラス側に渡ってくる値は、なぜかnullになるっぽいです。
まぁ、受け取る変数の型がIDだったり、数値だったりのときにエラーにならないためでしょうかね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした