2011年6月6日月曜日

入力フィールドの表示/非表示

JQuery処理

セレクトで、入力フィールドの表示を切替。

表示 or 非表示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE></TITLE>

<title>フィールドを表示/非表示</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></
script>

<script type="text/javascript">
$(function(){
$("#what").change(function(){
var val = $("#what").attr("value");
if(val == "表示"){
$("#txt").css("visibility","visible"); //見える化
$("#tx").text("コード "); //テキスト
}
else{
$("#txt").css("visibility","hidden"); //隠す
$("#tx").text(""); //隠す
}
});

});
</script>

</HEAD>

<BODY>

<br>
フィールドを表示/非表示
<br><br><br>

選択
<select name="" size="1" id="what">
<option value="">-------</option>
<option value="表示">表示</option>
<option value="非表示">非表示</option>
</select>

<font id="tx"></font>
<input type="text" name="mvto" size="5" maxlength="5" style="visibility:hidden"
id="txt" /><br>
<br><br>

</BODY>
</HTML>

0 件のコメント:

コメントを投稿