リストボックスの同期、選択に対応する第三の値

モノローグ||前提||メモ

SAStrutsを使っていました。Strutsのラッパーのようなので、JSP（html）でStrutsのタグを用います。

やりたいこと

リストボックスを使っていて、そのリストが選択された時の「対応する値1」と「対応する値2」をブラウザ上だけで取得したいケースがありました。具体的に書くと、会社名を選択してもらって、それに会社マスタIDと会社略称を連動させブラウザ上で扱いたいケースです。正直実装はしたものの冗長な気とスマートじゃない気がして...

実装方法

実装方法ですが、会社名-会社マスタIDのリストの他に、会社略称-会社マスタIDのリストを隠して用意しました。個人的にこの時点で変な感じがするんですが、ブラウザからデータを返さずに行わなければならないため、htmlを読み込んでブラウザで表現した時点で、会社名と会社マスタIDと会社略称の3つが同じ要素順序でいる必要があると思い、この方法以外思いつきませんでした。

JSPはこうなっています。

	<html:select property="companyMstId" styleId="companies" errorStyleClass="err">
		<html:option value="">※選択して下さい</html:option>
		<c:forEach var="e" varStatus="s" items="${companies}">
			<html:option value="${f:h(e.companyMstId)}">${f:h(e.companyNameKj)}</html:option>
		</c:forEach>
	</html:select>
<%--companyAbbreviatedNameは会社略称--%>
	<html:select property="companyAbbreviatedName" styleId="companyAbbreviatedName" errorStyleClass="err" styleClass="vanish">
		<html:option value=""></html:option>
		<c:forEach var="e" varStatus="s" items="${companies}">
			<html:option value="${f:h(e.companyMstId)}">${f:h(e.companyAbbreviatedName)}</html:option>
		</c:forEach>
	</html:select>

そしてJavaScriptはこう。

jQueryもいます。

var ryakuArray = new Array();
//ID属性から会社略称のエレメント（？）を取得
ryakuArray = document.getElementById("companyAbbreviatedName");
//選択された会社名リストのインデックスを取得
var index = $("select#companies").get(0).selectedIndex;
//目的の会社略称をゲット
var ryaku = (ryakuArray[index]);
$(ryaku).text();

エピローグ

JavaScriptを扱うのは初めてだったので実現できただけで嬉しかったのですが、普通というか他の人はどうやるんだろうという疑問は起こりました。これでいいんだろうか...
また、面白かったので「初めてのJavaScript」を買いました。興味が出ていいことです。でも読む時間がありません。どうしてもプライオリティが低いので割り当てる時間が足りません。まずは「Head First Java」読みきらねば...