EVERDEVEL

formタグのバリューの変更と取得

val()はformタグの中で使うタグのバリューを変更する時に使います。

val()は　inputタグ、selectタグのバリューを変更したり、バリューを取得する時に使います。

上にあるテキストフィールドのvalue属性のバリューを変更することができます。val()を使います。

HTML

<input type="text" class="text1" name="namae"　value="input your name" />

jQuery

$('.text1').val('名前を入力してください。');

위의 제이쿼리를 적용하면..아래와 같이 value값이 한글로 변경이 됩니다.

上のjQueryのソースを適用すると下のようにvalue属性のバリューが変更されます。

ではやってみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(function(){
    $('.text1').val('名前を入力してください。');
});
</script>
<style>
</style>
</head>
<body>
    <input type="text" class="text1" value="input your name" />
</body>
</html>

結果

selectタグもやってみましょう。使い方は同じです。

下のソースはselectタグの中でバリューをcitizenを基本バリューにしました。selected属性を使いましたね。
でもjQueryを利用してバリューをteacherに変更しました。なので最終的にはバリューはteacherです。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(function(){
    $('select').val('teacher');
});
</script>
<style>
</style>
</head>
<body>
    <select>
        <option value="student">学生</option>
        <option value="teacher">先生</option>
        <option value="ceo">会長</option>
        <option value="citizen"　selected>市民</option>
        <option value="army">陸軍</option>
        <option value="engineer">エンジニア</option>
    </select>
</body>
</html>

結果

結果をみると先生が選択されてあります。

こうバリューを指定する方法について調べました。今度はバリューを取得する方法について調べましょう。

formタグのバリューを取得する方法

バリューを指定するときは次のようにしましたね。

    $('selector').val('バリュー');

逆に何も書かないとバリューを取得することが出来ます。次のように。。

    $('selector').val();

では、やってみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(function(){
    $('div').text('バリューは　' + $('select').val());
});
</script>
<style>
</style>
</head>
<body>
    <select>
        <option value="student">学生</option>
        <option value="teacher">先生</option>
        <option value="ceo">会長</option>
        <option value="citizen" selected>市民</option>
        <option value="army">陸軍</option>
        <option value="engineer">エンジニア</option>
    </select>
    <div> </div>
</body>
</html>

結果

お疲れ様でした、ありがとうございます。

次のコンテンツは
focus-blur

ご覧くださってありがとうございます。お問い合わせと間違い説明はある場合、下にあるコメントにお願いいたします。

新しい窓を開き

講義に戻る。

everdevel