プルダウンリストの選択要素をjqueryから操作するには?

jQueryではselectタグで選択されているoption要素を操作することも
簡単にできます。

どうするかというと、selectタグに val() メソッドを用いて選択状態に
したいoptionタグのvalueを設定すればよいのです。

たとえば以下のようなフォームがあった場合、”one”を選択させるには

$("select.hoge").val(1);

とします。



one
two

以下にサンプルを示します。







$(function(){
        $('select#hoge1').change(function(){
            var val = $(" option:selected", this).val();
            $('select#hoge2').val(val);
        });
});



--------- 1 : hoge1 2 : hoge2 3 : hoge3
--------- 1 : hoge1 2 : hoge2 3 : hoge3

この例では二つのselectフォームを用意し、先にあるselectフォームの
選択内容を変更すると二番目の選択フォームもそれに伴って変更される
というサンプルになります。

javascript部分は以下になります。

$('select#hoge1').change(function(){
    var val = $(" option:selected", this).val();
    $('select#hoge2').val(val);
});

ここでは、1行目でselectフォームの内容が変更されたときに処理をするように
なっており、2,3行目は実際の処理が記載されてます。
2,3行目の処理は、内容が変更されたselectフォームの選択されている値を変数val
に代入し、3行目でその値を2番目のselectフォームに設定してます。
これにより1番目のselectフォームが変更されると、2番目のselectフォームも同じ
値に変更されるという動作が完成します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>