BlazorでのWebアプリケーション開発手法１【C#】D11_プルダウンに未選択行を入れる

プルダウン（select要素）に、あらかじめ何も選ばれていない状態を表す「未選択行」を追加する方法を解説します。基本となる考え方は共通していて、option要素を1行追加するだけです。

固定のoption一覧に空行を追加する

まずは「計測周期」のプルダウンのように、あらかじめoptionタグを固定で並べているケースです。次のように、value=”0″〜”3″の4つのoptionが用意されています。

図1　計測周期プルダウン（上）と、商品名プルダウン（下・foreachで動的生成）の初期状態

この一番上に、value=”-1″だけを指定して中身を空にしたoptionタグを1行追加します。

<select class="form-select"
        @bind="_selectedCycle">
    <option value="-1"></option>
    <option value="0">計測しない（任意計測）</option>
    <option value="1">毎日</option>
    <option value="2">毎週</option>
    <option value="3">毎月</option>
</select>

図2　1行目にvalue=”-1″の空optionを追加

この状態でブラウザーを確認すると、プルダウンの先頭に何も表示されていない空の行が追加されていることが分かります。

図3　閉じた状態では表示は変わらないが、プルダウンを開くと…

図4　先頭に空行が追加されている

foreachで生成しているプルダウンにも同じ理屈を適用する

同じ画面には、商品一覧（_products）をforeachで回してoptionを動的生成しているプルダウンもあります。

<select class="form-select"
        @bind="_selectedProductId">
    @foreach (var val in _products)
    {
        <option value="@val.ProductId">@val.ProductName</option>
    }
</select>

こちらも理屈は同じで、foreachが始まる前に空のoptionタグを1行だけ書いておけば、ループで生成される行の先頭に空行が入ります。

図5　foreachの直前にvalue=”-1″の空optionを追加

<select class="form-select"
        @bind="_selectedProductId">
    <option value="-1"></option>
    @foreach (var val in _products)
    {
        <option value="@val.ProductId">@val.ProductName</option>
    }
</select>

図6　商品名プルダウンにも同様に空行が追加された

未選択行に案内文を表示する

空行のままでは分かりにくいので、option要素の中に文字列を入れておくとガイドとして機能します。たとえば「未選択」という文字を入れてみます。

図7　option要素の中に「未選択」という文字列を追加

<option value="-1">未選択</option>

図8　プルダウンの先頭に「未選択」と表示される

ガイド的にもっと具体的な文言、たとえば「商品名を入力してください」のような案内文を入れることもできます。

<option value="-1">商品名を入力してください</option>

起動時の初期値を未選択行に合わせる

現在、商品名プルダウンの初期値（_selectedProductId）は200になっているため、画面を開いた時点で「p200」が選ばれた状態になります。

図9　_selectedProductIdの初期値は200

未選択行のvalueに合わせて、初期値を-1に変更します。

private int _selectedProductId = -1;

図10　初期値を-1に変更

この状態で画面を開くと、起動直後から「商品名を入力してください」というガイド文言がプルダウンに表示され、必ず何か選んでほしいという意図が伝わる作りになります。

図11　起動時に案内文が表示された状態

未選択行を選べないようにする（hidden）

ここまでの未選択行は、プルダウンを開けば一覧の中からいつでも選び直せる状態です。ただし、この項目が必須入力である場合、未選択行をユーザーがわざわざ選べてしまうのは望ましくありません。選択されていない間だけガイドとして表示させたい場合は、hidden属性を追加します。

図12　option要素にhidden属性を追加

<option value="-1" hidden>商品名を入力してください</option>

hiddenを付けると、起動直後のガイド表示はそのまま機能しますが、プルダウンを開いた一覧の中には未選択行が表示されなくなります。一度何かを選んだら、必ずいずれかの商品が選ばれている状態になります。

図13　プルダウンを開いても未選択行は一覧に出てこない

未選択行をグレー表示のまま残す（disabled）

hiddenの他に、disabled属性を使う方法もあります。

図14　option要素にdisabled属性を追加（IntelliSenseの候補）

<option value="-1" disabled>商品名を入力してください</option>

disabledの場合は、プルダウンを開くと一覧の中にも未選択行がグレーアウトした状態で表示され続けますが、選択することはできません。「これが商品を選ぶ項目である」ことをガイド的に見せ続けたい場合はこちらが向いています。

図15　一覧内に未選択行がグレー表示で残るが選択はできない

まとめ：selected・hidden・disabled・何もなしの使い分け

未選択行に何の属性も付けない場合は、selected属性を付けた場合と同じ動きになり、一覧からいつでも選び直せます。

図16　何も属性を付けない状態（selectedと同じ動作）

<option value="-1">商品名を入力してください</option>

未選択をアリにする（選び直せるようにする）か、ナシにする（一度選んだら戻れないようにする）か、またガイド的に表示だけしておきたいかどうかで、次のように使い分けます。

・何も付けない／selected：一覧からいつでも未選択に戻せる。

・hidden：起動直後のガイド表示はできるが、一覧には出てこない（選び直せない）。

・disabled：一覧にグレー表示のまま残り、ガイドとして見え続けるが選択はできない。

なお、この-1という値を「未選択」として扱うと決めたら、商品マスターからデータを取得した際に該当する商品が見つからなかった場合に-1をセットしておく、保存時にvalueが-1のままならエラーとして扱う、といった処理をプログラム側で別途用意しておく必要があります。