jQueryでselectをval以外の方法で選択する方法

とある案件で、selectの選択をボタンを使って変更する必要があった。
やりたいこととしてはselectで選択されている項目の「次の項目」「前の項目」を、
「▼」ボタン「▲」ボタンでワンクリックで変更できるというもの。

<select id="idname">
	<option value="0">0</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
</select>

まずは前の項目を選択「▼」ボタンがこう。

<button onclick="prevSelect();">▼</button>

jQueryの記述は大体こんな感じになると思う。

function prevSelect() {
	var value = $('#idname option:selected').prev().val();
	$('#idname').val(value);
}

「▲」ボタンの場合はprev()がnext()になるだけで実装できるだろう。
基本的にこのコードで大丈夫なのだが、今回の案件の場合。
同じvalueが複数存在するという稀なケースだった。

<select id="idname">
	<option value="0">0</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="0">A:0</option>
	<option value="1">A:1</option>
	<option value="2">A:2</option>
</select>

こんな感じの場合、上の方法でやると挙動がおかしくなる。
当然、同じvalueが存在するので上の1だった場合でも、
下の1が選択されてしまうのだ。

そこでval()による選択をやめて以下の方法で解決できた。

<select id="idname">
	<option value="0" name="a1">0</option>
	<option value="1" name="a2">1</option>
	<option value="2" name="a3">2</option>
	<option value="3" name="a4">3</option>
	<option value="4" name="a5">4</option>
	<option value="5" name="a6">5</option>
	<option value="6" name="a7">6</option>
	<option value="7" name="a8">7</option>
	<option value="0" name="a9">A:0</option>
	<option value="1" name="a10">A:1</option>
	<option value="2" name="a11">A:2</option>
</select>

このようにoptionのname属性をユニークな名前に変えてあげる。

function prevSelect() {
	var value = $('#idname option:selected').prev().attr('name');
	$('[name='+value+']').attr("selected", true);
}

attrのselectedを使うことでname属性に紐づいてselectの選択が変わってくれた。
まずない事例だとは思うが、解決方法としてメモしておこうと思う。

Leave a Reply

Your email address will not be published. Required fields are marked *

twenty + 11 =