ajaxで「Iterate through <select> options」ごときのこと

「選択されたアイテムの値」を取り出したり、「特定のアイテムを選択したり」は簡単だし情報もすぐに見つかるんだけどね…。

結構すぐには見つからず、徘徊してしまった。

こんなだとして：

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 });