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

最後に

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

本記事でご紹介した内容をそのまま使用されることはないと思いますので、カスタマイズしてご活用いただければ幸いです!

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

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら