兄弟階層にあるセレクトボックスの選択値を取得する

セレクトボックスたくさんあって、まとめてだったり個別にだったり、値をとるときのやりかた。
JSもjQueryもまだ全然慣れてないので、１ステップずつ進む感じで残しとく。
未来の自分へのポエム風。

セレクトボックスのサンプルおいとく。

<div id=selectbox>
    <div id="selectbox-1-2-3">
        <select>
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </select>
    </div>
    <div id="selectbox-4-5-6">
        <select>
            <option value="4">four</option>
            <option value="5">five</option>
            <option value="6">six</option>
        </select>
    </div>
<div>

id大事

div配下にセレクトボックス配置して、divにidふったある。
セレクトボックスに直接idふったパターンもあると思うけど、兄弟まとめてとるやったら親/先祖のdivのを使うんがえぇやろ、という思い。
特に、テスト自動化したいなら、えぇ感じにid指定しといた方がよろしい。

個別にセレクトボックス要素とってみる

個々のselect要素の値を取りたい。
”親のIDがコレでセレクトボックスとってや”って感じで指定する。

$("#selectbox-1-2-3 select").text()

これで選択リストの"one"、"two"、"three"がごっそりとれる。

選択した値だけ欲しいYO!

option:selectedをつけるがよい。

$("#selectbox-1-2-3 option:selected").text()

そん時選んだやつだけ取れるで。

兄弟階層まとめて取るのはよ

もひとつ親のdiv使うんやで。

$("#selectbox option:selected").text()

兄弟のセレクトボックスの選択値がくっついてとれる。

一個ずつばらしてぇなぁ

each使えばいけるで。

$("#selectbox option:selected").each(function(i, value){
    $(value).text()
});

ようけあるセレクトボックスの選択値だけが、バラバラにゲットできよるで。