【Multiple Select】特定のトリガーでプルダウンをリセットする方法

やりたいこと

あるボタンのクリックイベントで、Multiple Selectの選択状況をリセットしたい。

Multiple Selectとは、チェックボックスで複数選択できるプルダウンなどを作れるjQueryプラグイン。

公式はこちら

Multiple Selectの特徴

Multiple Selectは通常のselect要素で作るプルダウンとは少し異なるため、valueの取得の仕方などの勝手が変わってきます。

そのかわり、Multiple Selectの公式で用意されているさまざまなオプションやメソッドを使うことができます。

今回は「プルダウンのリセット」が目的なので、uncheckAllメソッドを使用していきます。uncheckAllは「すべてのチェックを外す」メソッドになります。

uncheckAllでリセット

<button id='reset'>リセット</button>

<select id='multiple-select'>
	<option value='1'>りんご</option>
	<option value='2'>バナナ</option>
	<option value='3'>ぶどう</option>
</select>

$(function () {
    $('#reset').click(function () {
        const $select = $('#multiple-select')
        $select.multipleSelect('uncheckAll')
    })
})

まとめ

他にもさまざまなメソッドが用意されており、上記とは逆にすべて選択状態にするメソッドなんかもありますので、Multiple Selectを使っている方はぜひ試してみてください。