タグ別アーカイブ: val

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

今回も備忘録的な内容です。
よくある処理ではありますが、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 人がこの 投稿 は役に立ったと言っています。

数値の0埋め

今回は備忘録的な内容です。
よくやる内容ではあるのですが「0埋め」処理です。
「0パディング」とも言いますね。

Javascriptで配列情報を操作する際には数値が理想なのかもしれません。
ただ、情報元のキーを考えると、あえて「0埋め」することがあったりします。
また、日時の表示にはよく使う内容です。
今回はそういう場合の覚書です。

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

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

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

            $(function(){

                $('#button').click( function() {
                    var setNum = $('#number').val();
                    var setPad = ($('#left_pad').val() * -1);
                    if ( $('#left_pad').val() > setNum.length) {
                        setNum = ( '000000000' + setNum ).slice( setPad );
                    }
                    $('#dispNum').html( setNum );
                });

            });


        --></script>

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

            div {
                margin : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">
            <div id="disp_area">
                <span id="dispNum">0</span>
            </div>
            <div id="input_area">
                <input id="number" type="text" value="0">
                <select id="left_pad">
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
                <button id="button">click</button>
            </div>
        </div>

    </body>
</html>

sample

sample を click すると数字が表示されています。
button がありますが culick すると数字が「0埋め」されて表示されます。

特に特別難しい訳ではありませんが、忘れやすいので改めて記載しておきます。

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

要素へのデータ紐づけ

今回は要素へのデータ紐づけに関してです。

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

        <script src="./jquery-1.9.1.min_.js"></script>   

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

            $(function(){

                $('#d_set').click(function() {
                    $('#disp_data').data('set_value', $('#input_data').val());
                    $('#input_data').val('')
                })
                
                $('#d_add').click(function() {
                    $('#disp_data').data('set_value', $('#disp_data').data('set_value') + ' ' + $('#input_data').val());
                    $('#input_data').val('')
                })

                $('#d_remove').click(function() {
                    $('#disp_data').removeData('set_value');
                    alert('Data Remove OK!');
                })

                $('#d_disp').click(function() {
                    $('#disp_data').empty().text($('#disp_data').data('set_value'));
                })

            });

        --></script>

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

            div {
                margin       : 10px;
            }

            button {
                margin-right : 5px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div>
                <h1>Data Input</h1>
                <input id="input_data" />
                <button id="d_set">Data Set</button>
                <button id="d_add">Data Add</button>
            </div>
            <div>
                <h1>Data Disp</h1>
                <button id="d_disp">Data Disp</button>
            </div>
            <div id="disp_data"></div>
            <div>
                <h1>Data Remove</h1>
                <button id="d_remove">Data Remove </button>
            </div>
        </div>

    </body>
</html>

sample

sample の入力欄に文字を入力して「Data Set」の button をクリックすることで
data を object のに紐づけることができます。

その時点では紐づけした data は表示されていませんが「Data Disp」の button を
click することで紐づけされた data を表示されることができます。

今回の内容は個人的には少し嬉しかったりします。
今まではとりあえず attr などで適当な名前を付けて設定していましたが
余り綺麗ではないと感じていました。

今回からは変な値を attr する必要も無いので安心できます。
ちなみに、配列でのデータの登録も出来るので非常に安心です。
ちょっと気になるのは、実際はどこに保存されているのかということでしょうか・・・

jQuery はここからダウンロードしてください。

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

文字列を切り取って表示

今回は説明文などの概要の表示です。
全文が指定の文字数より長い場合には、指定文字数に切り取って表示してみます。

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

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                max_length = 10;
                $('#input_text').keyup(function () {

                    wText = $(this).val();
                    if (max_length < wText.length) {
                        wText = wText.slice(0, max_length) + '...';
                    }

                    $('#disp_text').empty().append(wText);
                });

            });

        --></script>

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

            #main_area {
                margin              : 10px;
            }

            #input_text {
                width               : 400px;
            }

            #disp_text {
                width               : 400px;
                background-color    : #ccffcc;
                padding             : 2px;
                margin-top          : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input type="text" id="input_text"></textarea>
            <div id="disp_text"></div>
        </div>

    </body>
</html>

sample

sample で text に文字列を入力すると、10文字以上になった場合に
省略表示を行い、末尾に「…」を追加して表示します。

普段は php で文字列の処理を行っていますが、実際に jQuery で文字列の
切り取りができれば、以前の記事なども対応できます。
意外と色々できそうですね。

jQuery はここからダウンロードしてください。

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

入力内容の確認(テキスト以外)

前回は入力内容の確認処理にて textbox の入力内容チェックの方法を行いました。
今回は textbox 以外の入力内容のチェック方法をまとめて書いておこうと思います。

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

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('#textarea_check').click( function() {
                    alert($('#textarea_val').val());
                });

                $('#checkbox_check').click( function() {
                    $('input.checkbox:checked').each(function(index, obj) {
                        alert($(obj).val());
                    });
                });

                $('#radio_check').click( function() {
                    alert($('input[name="radio"]:checked').val());
                });


                $('#select_check_value').click( function() {
                    alert($('#select_val option:selected').val());
                });


                $('#select_check_text').click( function() {
                    alert($('#select_val  option:selected').text());
                });

            });

        --></script>

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

            .input_area {
                margin  : 20px;
                padding : 20px;
            }

        --></style>

    </head>

        <div id="disp_area">
            <div class="input_area">
                <textarea name="textarea" id="textarea_val"></textarea>
                <input type="submit" value="Textarea Check" id="textarea_check">
            </div>
            <div class="input_area">
                <input type="checkbox" name="checkbox01" id="checkbox01_val" class="checkbox" value="checkbox01">Checkbox01
                <input type="checkbox" name="checkbox02" id="checkbox02_val" class="checkbox" value="checkbox02">Checkbox02
                <input type="checkbox" name="checkbox03" id="checkbox03_val" class="checkbox" value="checkbox03">Checkbox03
                <input type="submit" value="Checkbox Check" id="checkbox_check">
            </div>
            <div class="input_area">
                <input type="radio" name="radio" id="radio01_val" value="radio01">Radio01
                <input type="radio" name="radio" id="radio02_val" value="radio02">Radio02
                <input type="radio" name="radio" id="radio03_val" value="radio03">Radio03
                <input type="submit" value="Radio Check" id="radio_check">
            </div>
            <div class="input_area">
                <select name="select" id="select_val">
                    <option value="Value01">DispText01</option>
                    <option value="Value02">DispText02</option>
                    <option value="Value02">DispText03</option>
                </select>
                <input type="submit" value="Select Check Value" id="select_check_value">
                <input type="submit" value="Select Check Text" id="select_check_text">
            </div>
        </div>

    </body>
</html>

sample

spmple には 幾つかの入力項目と button があります。
button を押すと入力内容を alert で表示します。

入力内容の取り方がわからないと色々不便ですからね。
とりあえず、いつも調べるのも大変なので纏めておきました。
select に関しては value と表示内容の 2 種類の情報が取得できるようですね。

個人的に不思議だと思った内容は textarea ですね。
val() で取れるんだ・・・
・・・なんか違う気がする。

jQuery はここからダウンロードしてください。

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