こんにちは、ryohei(@ityryohei)です!

本記事では連動するセレクトボックスの実装方法をご紹介しています。

連動するセレクトボックスとは、セレクトボックスAで指定された値によってセレクトボックスBの選択肢を動的に切り替える処理のことです。下記のデモをのような動きになります。

DEMO

See the Pen
Link Selectbox | Vue.js
by ryohei (@intotheprogram)
on CodePen.

上記ボックスの上段にあるセレクトボックスを選択した後、下段にあるセレクトボックスを開いてみてください。選択できる値が変わっていると思います。デモの内容ですと、上のセレクトボックスで「Toyota」を選択すると、下のセレクトボックスに「Toyota」の車種が、「Honda」を選択すると「Honda」の車種が表示されるようになっています。

連動するセレクトボックスnお実装方法は色々あるかと思いますが、本記事ではHTML側ではなくVueのdataプロパティでセレクトボックスのオプションアイテムを記述し、HTMLでループで表示する方法をご紹介しています。

では、解説していきます。

連動するセレクトボックスを作成する

まずはスクリプトを作成していきます。冒頭でも軽く触れましたが、本記事ではVueのdataプロパティにセレクトボックスのオプションを持たせています。メソッドは上のセレクトボックスで選択されたキーによって「selectedItem」に値を代入しています。

JS

var app = new Vue({
    el: '#app',
    data: {
        selectedKey: '',
        selectedItem:'',
        items: {
            Toyota: [
                { name: 'Aqua' },
                { name: 'Prius' },
                { name: 'Collora' },
                { name: 'Vitz' },
                { name: 'Crown' },
            ],
            Honda: [
                { name: 'N-BOX' },
                { name: 'Freed' },
                { name: 'VEZEL' },
                { name: 'N-WGN' },
                { name: 'Fit' },
            ],
        }
    },
    methods:{
        selected: function(){
            this.selectedItem = this.items[this.selectedKey];
        }
    }
});

以上でスクリプトの作成は完了です。続いてHTMLを作成します。

HTMLでは、上記で作成したスクリプトの「items」のキーを上のセレクトボックスに、バリューを下のセレクトボックスに出力しています。上のセレクトボックスで選択されたキーによって、下のセレクトボックスの値を切り替えるように作成します。

HTML

<div id="app">
    <select v-model="selectedKey" v-on:change="selected">
        <option v-for="(value, key) in items">
            {{ key }}
        </option>
    </select>
    
    <select>
        <option v-if="selectedItem" v-for="item in selectedItem">
            {{ item.name }}
        </option>
    </select>
    <button>Submit!</button>
</div>

以上でHTMLの作成は完了です。

最後に

いかがでしたでしょうか。

連動するセレクトボックスは検索条件の指定や複雑なフォームを作成しる際に役に立つかと思います。

本記事でご紹介したサンプルのままお使いになることはないかと思いますので、かすたまいずして ご価値用いただければと幸いです。

以上、Vue.jsで連動するセレクトボックスの実装方法のご紹介でした!