【Vue.js】連動するセレクトボックス

こんにちは、Ryohei（@ityryohei）です！

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

Vue.jsで複数のセレクトボックスを連動させたいんだけど、良い方法ないかな？

上記の疑問にお答えします。

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

連動するセレクトボックスとは

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

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

上記デモ内の上段にあるセレクトボックスを選択した後、下段にあるセレクトボックスを開いてみてください。選択できる値が変わっているはずです。

デモの内容ですと、上のセレクトボックスでToyotaを選択すると、下のセレクトボックスにToyotaの車種が、Hondaを選択するとHondaの車種が表示されます。

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

Vue.jsでスクリプトを作成する

まずはスクリプトを作成していきます。冒頭でも触れましたが、本記事では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];
        }
    }
});

以上でVue側の準備は完了です。続いてVueのdataを使って、HTMLでセレクトボックスを作成します。

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レイアウトの作成は完了です。本記事の内容を実装すると、冒頭でご紹介したデモの内容を実現することができます。