HTML入力ドロップダウンメニューを実装する方法

HTML入力ドロップダウンメニューを実装する方法

コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8" />
</head>
<本文>
<?php
エコー '
<フォーム名="DDForm" メソッド="GET" アクション="">
<div style="position:relative;">
<span style="margin-left:100px;width:18px;overflow:hidden;">
<select style="width:180px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value" name="hh">
<option value="車">車</option>
<option value="Train"> 電車</option>
<option value="航空機"> 航空機</option>
</選択>
</span><input name="box" style="width:160px;position:absolute;left:0px;">
<input value="送信" name="送信" type="送信"/>
</div>
</form>';
$aa=$_GET['hh']."111"; // ドロップダウンメニューの値を選択する
$bb=$_GET['box']."222"; // 入力ボックスの値
$aa をエコーし​​ます。
エコー "</br>";
$bb をエコーし​​ます。
// ドロップダウン メニューに入力できる値を取得するには、入力ボックスの値を取得するだけです。
?>
</本文>
</html>


ドロップダウン メニューに入力できる値を取得するには、入力ボックスの値を取得するだけです。

注: </span><input name="box" style="width:160px;position:absolute;left:0px;">

この行は1行でなければならず、次のように書くことはできません。

</span>

<input name="box" style="width:160px;position:absolute;left:0px;">

改行後、ドロップダウンメニューの値が入力ボックスに表示されません。

入力に基づいて一致するメニュー値を自動的に選択することもできます。

<<:  Docker コンテナにおける Patroni の簡単な分析

>>:  MySQLのスペースをクリーンアップするいくつかの具体的な方法

推薦する

Nuxt.jsプロジェクトのDockerデプロイメントの実装

Docker 公式ドキュメント: https://docs.docker.com/ Docker は...

webpackが静的リソースキャッシュを実装する方法

目次導入複数の異なるハッシュを区別するハッシュチャンクハッシュコンテンツハッシュjs キャッシュの実...

MySQL ディープページング問題の解決の実践記録

目次序文ディープページングを制限すると遅くなるのはなぜですか?サブクエリによる最適化B+ツリー構造の...

Vue での親子コンポーネント通信と、sync を使用して親子コンポーネント データを同期する

目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...

div画像マーキーシームレス接続実装コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...

純粋な CSS で実装された大きなドロップダウン メニューのサンプル コード

これは純粋に CSS で実装された大きなドロップダウン メニューです。この大きなメニューは、js コ...

MySQL ジョイントテーブルクエリの簡単な例

MySql は結合テーブルクエリを使用しますが、初心者には理解しにくい場合があります。以下の記事では...

MySQL の主キーがクエリを高速化するために数値を使用するか UUID を使用するかについての簡単な分析

実際の開発では、MySQL の主キーは重複できず、主キーが自動的にインクリメントされることがあります...

Mysqlデータテーブルでワームレプリケーションを使用する方法

簡単に言えば、MySQL ワーム レプリケーションは、クエリされたデータを指定されたデータ テーブル...

LNMP と phpMyAdmin を Docker にデプロイする方法

環境準備:複数のコンテナに基づいてホストに lnmp をデプロイします。 nginx サービス: 1...

伝説的な VUE 構文シュガーは何をするのでしょうか?

目次1. 糖衣構文とは何ですか? 2. VUE の構文糖とは何ですか? 1. 最も一般的な構文シュガ...

PostgreSQL マテリアライズドビュープロセス分析

この記事は主にPostgreSQLマテリアライズドビューのプロセス分析について紹介します。サンプルコ...

Vue-pdfはPDFファイルのオンラインプレビューを実装します

序文ほとんどのプロジェクトでは、PDF ファイルのオンライン プレビューに遭遇するでしょう。このプロ...

docker を使用して hbase をデプロイする方法

スタンドアロンの hbase について、まずは説明しましょう。 Dockerをインストールするまず ...

WeChat アプレットのシンプルなログイン ページの実装 (ソース コード付き)

目次1. 上の写真2. ユーザーが存在しない3. コードをアップロードする1. 上の写真 2. ユー...