送信後に HTML フォームのドロップダウン選択値を保持するにはどうすればよいですか?

送信後のフォーム値の保持

HTML フォームを使用する場合、フォームの作成後に選択した値をドロップダウン要素に保持することが望ましいことがよくあります。提出されました。これにより、以前に選択したオプションが選択されたままになるため、シームレスなユーザー エクスペリエンスが保証されます。

実装

PHP では、WordPress を使用し、JavaScript を使用して選択された値を取得することでこれを実現できます。フォームのクエリ文字列パラメーターから取得します。

次の HTML について考えてみましょう。 form:

<form method="get" action="">
  <select name="name">
    <option value="a">a</option>
    <option value="b">b</option>
  </select>
  <select name="location">
    <option value="x">x</option>
    <option value="y">y</option>
  </select>
  <input type="submit" value="Submit" class="submit" />
</form>

JavaScript ソリューション

if-else 構造を使用せずに選択した値を自動的に更新するには、JavaScript を使用できます:

<script type="text/javascript">
  document.getElementById('name').value = "<?php echo $_GET['name']; ?>";
  document.getElementById('location').value = "<?php echo $_GET['location']; ?>";
</script>

このスクリプトは、URL のクエリ文字列から選択された値を取得し、ドロップダウンで選択された値として設定します。

このメソッドを使用すると、フォームが送信されてページがリロードされた後でも、選択したオプションが保持されたままになります。

以上が送信後に HTML フォームのドロップダウン選択値を保持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。