---
title: "セレクトボックスのN番目を選択する"
slug: "select-the-nth-of-options"
updated: 2024-04-12T06:20:02Z
published: 2024-04-12T06:20:02Z
canonical: "help.autify.com/select-the-nth-of-options"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.autify.com/llms.txt
> Use this file to discover all available pages before exploring further.

# リストから選択肢のN番目を選択する

## リストから選択肢のN番目を選択するには

[リストから値を選択するステップ](/docs/ja/select-from-list-by-label)は、ラベルをもとに選択肢を選択するため、「選択肢のN番目を選択する」といった使い方ができません。

しかし、「[要素に対するJSステップ](/docs/ja/js-steps-for-elements)」と「リストから値を選択する」ステップを組み合わせることで「選択肢のN番目を選択する」操作を実現可能です。

          注意点

          

今回紹介する手法は、`<select>`要素以外で実装されたリストに対しては使えませんのでご注意ください。

### 要素に対するJSステップを使用する利点

通常のJSステップを使用することで、一つのJSステップでリストから選択肢のN番目を選択することも可能ですが、「要素に対するJSステップ」を使うことで得られる以下の利点を考え、今回は「要素に対するJSステップ」と「リストから値を選択する」ステップを組み合わせる方法を紹介します。

- AutifyのAIが要素を取得するのでCSSセレクター/XPathの取得を省ける。
- 要素取得の処理を書かなくて良いので比較的少ないコードで済む。
- ページのローディング完了や要素の出現を自動で待ってくれる。

### レコーディングとシナリオの編集

レコーディング中に対象のリストを右クリックし、「Autify Recorder > JSステップを追加する」を選択します。次にリストから適当な値を選択し「保存」をクリックします。

![ja_select_option_n_1.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/ja_select_option_n_1.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A18%3A16Z&se=2026-11-15T02%3A18%3A16Z&sr=c&sp=r&sig=BAvowUaPALbDFYVWw3FcFW4P951hhzZrCPWGBi0hKfE%3D)

すると「JavaScriptのコードを実行する（以下、要素に対するJSステップ）」と「リストから〜を選択する」ステップの2つが作成されます。

![ja_select_option_n_2.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/ja_select_option_n_2.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A18%3A16Z&se=2026-11-15T02%3A18%3A16Z&sr=c&sp=r&sig=BAvowUaPALbDFYVWw3FcFW4P951hhzZrCPWGBi0hKfE%3D)

「要素に対するJSステップ」を開き、以下のコードを貼り付けます。要素はAutifyが取得してくれるので、比較的短いコード量になります。

```
// リストは0から始まるので4番目の選択肢を選択したい場合は3を指定します。
const index = 3;

// -- ここから下は変える必要はありません --
// 指定したindex番号を持つラベルを取得します。
const label = element.options[index].label;

// 取得したラベルをreturnし、後続のステップで使用できるようにします。
return label;
```

下記の部分で選択肢のindex番号を指定しています。0から始まるため、4番目の選択肢を指定したい場合は、3を指定します。

```
const index = 3;
```

次に、「リストから〜を選択する」ステップをクリックし、ラベルの値を、「他のステップから取得」に変更し、「要素に対するJSステップ」のステップを指定し保存します。これで「要素に対するJSステップ」が取得したラベルを選択するようになります。

![ja_select_option_n_3.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/ja_select_option_n_3.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A18%3A16Z&se=2026-11-15T02%3A18%3A16Z&sr=c&sp=r&sig=BAvowUaPALbDFYVWw3FcFW4P951hhzZrCPWGBi0hKfE%3D)

### テスト実行

テストを実行してみます。

実行結果を見ると、「要素に対するJSステップ」のreturnの値が期待するラベルの値であることを確認できました。

![ja_select_option_n_4.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/ja_select_option_n_4.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A18%3A16Z&se=2026-11-15T02%3A18%3A16Z&sr=c&sp=r&sig=BAvowUaPALbDFYVWw3FcFW4P951hhzZrCPWGBi0hKfE%3D)

リストの値もreturnした値に変更されていることが確認できました。

![ja_select_option_n_5.png](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/ja_select_option_n_5.png?sv=2026-02-06&spr=https&st=2026-11-15T01%3A18%3A16Z&se=2026-11-15T02%3A18%3A16Z&sr=c&sp=r&sig=BAvowUaPALbDFYVWw3FcFW4P951hhzZrCPWGBi0hKfE%3D)