jqueryでselectボックスで選択された要素を取り出す

jqueryでselectボックスで選択された要素を取り出す方法をご紹介します。

以下のように指定します。

html

&lt;select class="hogehoge" name="clientName"&gt;
    &lt;option&gt;選択して下さい&lt;/option&gt;
    &lt;option&gt;太郎&lt;/option&gt;
    &lt;option&gt;次郎&lt;/option&gt;
    &lt;option&gt;花子&lt;/option&gt;
&lt;/select&gt;
&lt;p class="mogemoge client"&gt;&lt;/p&gt;

<option>選択して下さい</option>

</select>

js側

$('[name=clientName]').change(function() {
    var val = $(this).val();
    $('p.client').text(val);
});

$('[name=clientName]').change(function() {

var val = $(this).val();

$('p.client').text(val);

});

nameが「clientName」の場合に、change()が実行されます。

<p>タグでclassが「client」の箇所に、この場合だと「太郎」や「次郎」の名前が表示されるようになります。

上の例では<p>タグ内に「mogemoge」というclassも指定されていますが、この表示に関係なく、<p>タグ内に「client」classがある箇所がマッチすることになります。