>웹 프론트엔드 >JS 튜토리얼 >HTML SELECT 태그에 대한 읽기 전용 속성을 에뮬레이션하고 여전히 POST 데이터를 검색하는 방법은 무엇입니까?

HTML SELECT 태그에 대한 읽기 전용 속성을 에뮬레이션하고 여전히 POST 데이터를 검색하는 방법은 무엇입니까?

DDD
DDD원래의
2024-11-13 02:24:01973검색

How to Emulate a Readonly Attribute for an HTML SELECT Tag and Still Retrieve POST Data?

POST 데이터 검색을 사용하여 HTML SELECT 태그에 대한 읽기 전용 속성 에뮬레이션

HTML 사양에 따르면 SELECT 태그에는 읽기 전용 속성이 없습니다. 사용자 입력 변경을 방지하기 위해 비활성화된 속성을 사용합니다. 그러나 비활성화된 입력이 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>

코드 설명:

  • 양식에 비활성화된 SELECT 요소와 숨겨진 동물 입력이 포함되어 있습니다.
  • "활성화" 버튼을 클릭하면 SELECT 요소가 활성화되고 이름이 "동물"로 설정됩니다. 중복 제출을 방지하기 위해 숨겨진 입력이 비활성화됩니다.
  • onchange 이벤트는 다시 활성화되면 업데이트된 SELECT 요소 값을 숨겨진 입력으로 전송합니다.
  • 양식 제출에는 제출된 양식 데이터가 표시됩니다. 여기에는 두 가지 모두가 포함됩니다. 두 번째 SELECT 요소의 색상 선택과 숨겨진 입력의 동물 선택

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.