メインコンテンツへスキップ

階層リストの項目に初期値を設定

  • 更新

!++++

Ver.5　[ 機能を見る ] [ 機能設定を見る ]
Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

1. はじめに

Client-side JavaScript を用いて、「行追加」ボタン押下時に、検索条件に設定された値を明細行のリストボックスに初期値として反映する方法を紹介します。

2. サンプル機能の内容と確認ポイント

検索条件に設定された値を取得し、行追加時にリストボックスの初期値として反映する方法を以下に示します。

 

Client-side JavaScript による実装内容は以下のとおりです。

resizeContents_end 関数内で eventName が "ADDLINE" の場合にのみ、以下の処理を実行します。

  1. 検索条件の値と、対象となるすべての select 要素を取得します。
  2. 各 select 要素に対して for...of を用い、MutationObserver により監視する処理を Promise で作成し、変数に格納します。
  3. 上記ループ内で、検索条件の値を各 select 要素に設定します。

  4. 値の設定後、dispatchEvent() を使用して change イベントを手動で発火させます。

  5. await を用いて、2. で作成した処理を実行します。

🔍 確認いただけるポイント

  • 「行追加」時に、検索条件の値がリストボックスに初期値として設定されていること

  • 設定されたリストボックスの値に応じて、子階層のリストボックスの内容が、正しく連動して表示されること

3. 画面イメージ

以下は、検索条件「得意先コード」に「山田株式会社」を指定し、「行追加」ボタンで明細行を追加した場合の画面例です。

追加された行の「納入先コード」には、「山田株式会社」に紐づく内容が初期値として表示されています。

 

以下は、検索条件「得意先コード」に「鈴木株式会社」を指定し、同様に明細行を追加した場合の画面例です。

追加された行の「納入先コード」には、「鈴木株式会社」に紐づく内容が初期値として表示されています。

 

!++++

使用したコード一覧

•resizeContents_end()

!----