【失敗談】ド素人がDropdownCheckListを使いたくなったので調べたけど無理だった

ドロップダウンできるチェックボックスがほしかったんです。でも、よくよく調べると、ドロップダウンはチェックボックスにできないし、チェックボックスはドロップダウンできないんですってね。

しりませんでした。

いろいろ調べた挙句、最終的にはできないって結論に達したんですが、せっかくごちゃごちゃ書きながら進めたので供養させてください・・・。

導入⇒挫折

ひとまずググると、そういうモノが世の中には存在するということを知りました。jQueryで。
dropdown-check-list

jQueryか・・・。すでに環境が用意されている状況で試行錯誤した経験はあるのですが、導入した経験がありません。このため、『ドロップダウンリストの中にチェックボックスを入れる。』のようなサイトを探しだし、これ幸いと見てみても、

<script type="text/javascript" src="./js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.13.custom.min.js"></script>

・・・？

ちょっと何を言っているのかわからないという体たらく。これはいけない。その後、jQuery自体の使い方とかを調べた結果、上記のスクリプト参照コードは画面表示部のHTMLに書けばいいということはわかりました。

知ってる、javascriptとかで使うやつだよね！（それしか知らない）

ひとまず整理

こんな調子ですので、ひとまず現状を整理します。サンプルはhtmlばかりだけど、今回はaspxです。表示するところに入れればいいから、aspxに入れればいいのかな・・・？

jqueryで検索かけたら他にも使われてるところがありました。じゃあここにしよう。

で、visualstudioのjsファイルとかcssファイルとか入っているところに落としてきたソースを入れて、それを参照するようにすればいいのかな。

という仮説のもと、実装していくことにします。

まず、先の解説ページが5年くらい前のもの（ついでにこのDropdownCheckListも1年以上前のものだけど・・・まあいいか）ですので、現在は何に相当するかを確認する必要があります。

jquery-1.11.2.min.js
jquery-ui-1.11.2.custom.min.js
css...？

cssで詰みました。バージョン違いとかじゃなくて何もかも違うじゃん。

ここで、サンプルとかあるじゃーんと思いつきました。最初に見たときはわけがわからなかったのですが、今なら何を確認すればいいのかわかるはず！

・・・。

大体わかりました。わからないって喚いてたのが恥ずかしい。

jQueryのバージョン違い？

で、よくよく見ると使ってるjqueryのメジャーバージョンが3なんですが、入れようとしているのが1でした。私のjquery、古すぎ・・・？

調べると、競合とかがやっぱりあるみたいですね。で、それを回避する方法もありそうです。

もう少し調べると、基本的に下位互換を意識してるから大丈夫みたいなページもありました。ひとまずそれを信じて、古いバージョンは削除します。

実装

というわけで、すでに読み込まれているjquery以外を読み込ませます。

jquery-ui-1.11.2.min.js
ui.dropdownchecklist.js
ui.dropdownchecklist.standalone.css

この3つですね。

続けて、先のサイトを参考にして以下のコードを追加します。もういくつか追加されていたので、そのなかに紛れ込ませます。

$(document).ready(function() {
$("#id").dropdownchecklist( {width: 200 } );
});

この#idを、対象のselect-boxのidと同じものにしてやれば、そやつの見た目が変わるようです。まじか。

さっそく、被ってないかを調べたうえで、idを振ってやります。

で、コントロール側にもそのidを・・・というところでまた疑問が。

コントロールは何？

サンプルだとselectになっています。htmlですね。ですが今回はaspxです。どうなるんだろうこれ。

当たり前のことながらin-outは変えたくないわけですが・・・ん、ということはまずjqueryなしで実装できないと話にならないですね。（まだやってなかった）

というわけで、ひとまずjqueryは無視し・・・というわけにもいかないなあ。できたところで使えないコントロールじゃ意味ないもんなあ。

試してみます。

ダメでした。そりゃあね？

ListBox

ダメです。うーん。

その後いろいろと調べたんですが、そもそもasp.netのパーツでは使えなくて、的なものじゃないとダメなんですね。
根本的に勘違いしてました。asp.netで使えるっぽい同様のコントロールは、なんかC#にしか存在しないっぽいし・・・。

DropDownCheckList ASP.NET Server Control

うーん、なんとなく、hiddenしたaspにバインドしてきた値をもとにクライアント側で動的に表示して、最後に選択状態をaspのコントロールに戻してやればできそうな気はするけど・・・。

ちょっと自分の知らないところに技術が飛びすぎるから深追いはやめておこう、必須というわけではないし。

というわけで、ド素人の敗戦記録でした。

 B! LINE