> 웹 프론트엔드 > JS 튜토리얼 > POST 데이터에 대해 HTML에서 읽기 전용 SELECT 태그를 에뮬레이트하는 방법은 무엇입니까?

POST 데이터에 대해 HTML에서 읽기 전용 SELECT 태그를 에뮬레이트하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-11-16 10:22:02
원래의
438명이 탐색했습니다.

How to Emulate Readonly SELECT Tag in HTML for POST Data?

POST 데이터에 대해 HTML에서 읽기 전용 SELECT 태그 에뮬레이션

HTML 사양에서는 비활성화된 속성이 있는 SELECT 요소를 비활성화할 수 있지만 이로 인해 POST 또는 GET 요청에 값이 포함되지 않습니다. 이는 원하는 동작이 사용자가 선택 항목을 수정하지 못하게 하면서 제출할 값은 그대로 유지하는 것인 경우 문제가 됩니다.

이 문제를 극복하고 POST 데이터를 보존하면서 읽기 전용 기능을 얻으려면 2단계 접근 방식이 권장됩니다. :

  1. Keep the SELECT 비활성화: 사용자가 SELECT 요소에 비활성화된 속성을 유지하여 사용자가 상호작용.
  2. 숨겨진 입력 추가: SELECT와 동일한 이름 속성을 가진 숨겨진 입력 요소를 생성하고 해당 값을 SELECT의 현재 값으로 설정합니다.

나중에 SELECT 요소를 활성화하려면 다음 단계를 따르세요.

  1. 다시 활성화하세요. SELECT: SELECT에서 비활성화된 속성을 제거하고 해당 이름 속성을 원래 값으로 다시 설정합니다.
  2. 숨겨진 입력과 동기화: SELECT의 onchange 이벤트에서 해당 속성을 복사합니다. 일관성을 보장하기 위해 숨겨진 입력에 값을 추가합니다.

다음은 이를 설명하는 코드 예제입니다. 접근 방법:

<form>
로그인 후 복사
$('#animal-select').change(function() {
  $('#animal').val($(this).val());
});
로그인 후 복사

위 내용은 POST 데이터에 대해 HTML에서 읽기 전용 SELECT 태그를 에뮬레이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿