HTML SELECT タグの読み取り専用属性をエミュレートしながら POST データを取得する方法

POST データ取得による HTML SELECT タグの読み取り専用属性のエミュレート

HTML 仕様によれば、SELECT タグには読み取り専用属性がありません。ユーザー入力の変更を防ぐために、disabled 属性を使用します。ただし、無効な入力は POST または GET データ送信から除外されるため、問題が発生します。

この課題に対処するには、回避策として、SELECT 要素の無効な属性を維持しながら、同じ名前の非表示の入力を追加します。

解決策:

1. SELECT 要素を初期化します。
2. SELECT 要素と同じ名前と値を持つ非表示の入力を追加します。
3. SELECT 要素が再度有効になった場合は、onchange イベントを使用してその値を非表示の入力に転送します。その後、非表示の入力を無効にするか削除します。

実装:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form>
<p><strong>コードの説明:</strong></p>
<ul> <li>フォームには無効な SELECT 要素と動物の非表示の入力が含まれています</li>
<li>「有効」ボタンをクリックすると、SELECT 要素が有効になり、その名前が「animal」に設定されます。重複送信を防ぐために、非表示の入力は無効になっています。</li>
<li>onchange イベントは、再度有効にすると、更新された SELECT 要素の値を非表示の入力に転送します。</li>
<li>フォームの送信には、送信されたフォーム データが表示されます。これには両方のデータが含まれます。 2 番目の SELECT 要素からの色の選択と、非表示の入力からの動物の選択。</li>
</ul>
</form>
</div>

以上がHTML SELECT タグの読み取り専用属性をエミュレートしながら POST データを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。