セレクトボックスの表示内容

今回も備忘録的な内容です。
よくある処理ではありますが、select の操作した処理を取得する処理です。

普通の場合には「$(‘#main_selectoption:selected’)」と云う形で処理を
とるのですが、今回は他との兼ね合いによって $(this) を基本として
処理をありました、いつも通りの作業を使用としましたが・・・

・・・あれ、「$(this)」で括っているためその続きが書けません。
そのため、いつもの方法意外で対応する必要があるのかと思います。
今回はのための方法です。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#main_select').click( function() {

                    $objO = $('#main_select option:selected');
                    $('#o_txt').html( $objO.html() );
                    $('#o_val').html( $objO.val() );

                    $objC = $(this).children(':selected');
                    $('#c_txt').html( $objC.html() );
                    $('#c_val').html( $objC.val() );

                });

            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 10px;
            }
            th, td {
                min-width        : 100px;
            }

        --></style>

    </head>
    <body>

        <div id="button_area">
            <select id="main_select">
                <option value="1">TextA</option>
                <option value="2">TextB</option>
                <option value="3">TextC</option>
                <option value="4">TextD</option>
                <option value="5">TextE</option>
            </select>
        </div>

        <div id="main_area">
            <table id="disp_text">
                <tr>
                    <th rowspan="2">$('#main_select option:selected')</th>
                    <th>text</th><td id="o_txt"></td>
                </tr>
                <tr>
                    <th>value</th><td id="o_val"></td>
                </tr>
                <tr>
                    <th rowspan="2">$('this').children(':selected')</th>
                    <th>text</th><td id="c_txt"></td>
                </tr>
                <tr>
                    <th>value</th><td id="c_val"></td>
                </tr>
            </table>
        </div>

    </body>
</html>

sample

sample で Select を変すると選択した内容の Text と Value が表示されます。
今回は、取得の方法が異なるため2種類の Text と Value を表示しています。

この方法で今回は無事に値が取れましたが忘れるといけないので記録しておきます。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

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