「選択されたアイテムの値」を取り出したり、「特定のアイテムを選択したり」は簡単だし情報もすぐに見つかるんだけどね…。
結構すぐには見つからず、徘徊してしまった。
こんなだとして:
1 <select id="lang-pulldown">
2 <option value="python" selected>Python</option>
3 <option value="python3">Python 3</option>
4 <option value="py3tb">Python 3.0 Traceback</option>
5 <option value="pytb">Python Traceback</option>
6 <option value="pycon">Python console session</option>
7 </select>
ここまでは普通でしょ?
1 var lang_pulldown = form.find("#lang-pulldown");
2 // py3tb を「選択」したければ、 lang_pulldown.val("py3tb");
3 // 「選択されたものの value」が欲しければ、lang_pulldown.val()
4 // ここまではいい。
で、これ、テキストボックスと連動してるとして、テキストボックスは自由入力だとして、だけれども pulldown にあるものだけが入力として妥当だ、として。つまりオートコンプリートのようでそうでない。
なんでこんな UI かといえば、option がとても多くて、pulldown だけではストレス溜まるのね。「知ってるものなら手入力の方が早い」「たまにしか使わないものは pulldown が便利」てわけだ。
となると、このエントリの見出しの通り「Iterate through <select> options」がどうしても必要。
いまだにワタシ、jquery には不慣れなのであって、つまりセレクタがいまだに理解し切れてない。ので、以下の正解まで結構な時間(多分30分くらい)徘徊してしまった:
1 var lang_pulldown_options = form.find("#lang-pulldown option");
2 lang_pulldown_options.each(function(i) {
3 if (some_cond_what_we_want) {
4 // ...
5 return false;
6 }
7 });
なんというか、猿真似で色々書いてるもんで、正解を知ってからは「あ、あそこで使ってたわ」と後知恵でわかるんだけれどな。
最終的に書きたかったのはこんなの:
1 var lang_input = form.find("#lang");
2 var lang_pulldown = form.find("#lang-pulldown");
3 var lang_pulldown_options = form.find("#lang-pulldown option");
4 lang_pulldown.on("change", function () {
5 var e = $(this);
6 lang_input.val(e.val());
7 });
8 lang_input.on("change", function () {
9 var e = $(this);
10 var raw_text = e.val();
11 lang_pulldown.val(raw_text);
12 if (lang_pulldown.val() === null) {
13 lang_pulldown_options.each(function(i) {
14 if ($(this).val().lastIndexOf(raw_text, 0) === 0) {
15 var v = $(this).val();
16 e.val(v);
17 lang_pulldown.val(v);
18 return false;
19 }
20 });
21 }
22 });
テキストボックスに変更があれば pulldown の選択をトリガーし、選択できなければ前方一致でテキストにフィードバック、てヤツ。何度も言うけどオートコンプリートそのものとは違います。