ホームページ > ウェブフロントエンド > htmlチュートリアル > H5 を使用して特殊効果のあるドロップダウン ボックスを作成する

H5 を使用して特殊効果のあるドロップダウン ボックスを作成する

php中世界最好的语言
リリース: 2017-12-04 09:42:20
オリジナル
5980 人が閲覧しました

今日は、H5 を使用して小さな特殊効果を備えたドロップダウン ボックスを作成する方法を説明します。ドロップダウン ボックスの内容をクリックすると、テキスト フィールドに小さな特殊効果が表示されます。詳細なケース コードを見てみましょう。

「風、雨、雷、稲妻」を含むドロップダウンボックスがあります。風を選択すると、テキストフィールドに選択

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
<form name="form_name" >  
    <select name="select_name"   onChange="ShowToText(); "  >  
        <option value="1">风</option>  
        <option value="2">雨</option>  
        <option value="3">雷</option>  
        <option value="4">电</option>  
    </select><br>  
    <textarea rows="3" cols="30"name="textfield_name3">  
    </textarea>  
</form>  
</body>  
<script language="JavaScript">  
    function ShowToText(){  
        document.form_name.textfield_name3.value=document.form_name.select_name.options[document.form_name.select_name.selectedIndex].text  
    }  
</script>  
</html>
ログイン後にコピー

が表示されます。

これらの事例を読んだことがあるかと思いますが、この方法をマスターしたら、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。
関連書籍:

HTMLでのテーブルのネストに関する注意事項

HTML5タグのネストルールの詳細な紹介

html5の月餅作りミニゲームチュートリアル

以上がH5 を使用して特殊効果のあるドロップダウン ボックスを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート