• TeamViewer 제한 우회
• 무작위 비밀번호 생성기 암호 문구가 포함된 전화 비밀번호 생성기
• CSS를 사용하여 한 줄에 블록을 만드는 방법은 무엇입니까?
• 로컬 컴퓨터에 Joomla 설치
• 인터넷에서 어떤 흥미로운 것들을 찾을 수 있나요?
• Sony Ericsson Xperia Neo 리뷰: 기대에 부응
• 스마트 폰 Samsung GT I8160 Galaxy Ace II : 리뷰 및 사양
• 러시아의 Bla Bla Car 아날로그: 서비스에는 어떤 대안이 있으며 차이점은 무엇입니까?
• NewPipe는 Android에서 음악과 비디오를 다운로드할 수 있는 옵션이 있는 무료 YouTube 아날로그입니다.
• 웹 리소스의 페이지 호스팅 및 로딩 속도를 확인하는 방법 진실을 파악하는 두 가지 방법

오늘 저는 CSS로 목록을 생성하는 간단한 "레시피"를 제시하고 싶습니다. JQuery도 없고 CSS3도 없습니다. 단지 오래된 크로스 브라우저 CSS일 뿐입니다. 예제는 매우 간단하므로 경험이 많은 동료는 관심이 없을 수도 있습니다. 소셜 버튼이 있는 드롭다운 목록을 구현하겠습니다.

그러니까 긴 얘기는 하지 말고 바로 본론으로 들어가자

HTML

코드가 커지지 않도록 스타일 포함 등 일반적인 사항을 의도적으로 생략했습니다. 페이지 하단에는 소스에 대한 링크가 제공됩니다. 모든 것이 거기에 있습니다.
HTML에는 일반 목록과 특이한 헤더가 있습니다. 특이한 점은 이벤트를 추적할 수 있는 하이퍼링크로 만들어졌다는 점입니다. :호버, 즉 안내입니다. 제목 위로 마우스를 가져가면 드롭다운 목록이 작동합니다.

CSS

먼저 드롭다운 목록의 기본 스타일을 살펴보겠습니다. 나는 코드의 모든 줄을 더 명확하게 설명하려고 노력했습니다.

/*패딩 재설정*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*기본 래퍼*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25px ) /*호버 블록 스타일*/ .droplink:hover( height:auto; background-color:#3E403D; border:solid 1px #3A3C39 ) /*정상 상태의 제목*/ .droplink h3 a( text-align:center ; 너비:100%; 디스플레이:블록; 패딩:12px 0px; 텍스트 장식:없음 ) .droplink h3 a img(border:none) /*호버 스타일*/ .droplink:hover a ( color:#FFF; 글꼴- 가중치:굵게; 위치:절대 )

여기에는 특별한 것이 없습니다. 블록의 크기와 스타일, 헤더의 스타일, 두 요소 모두 커서를 가리킬 때의 스타일을 표시했습니다. 계속하세요:

/*호버 없이 목록 숨기기*/ .droplink ul( list-style:none; display:none ) /*호버 시 목록 표시*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li(표시:블록)

이 코드는 더 흥미롭고 작동 방식을 보여줍니다. 드롭 다운 목록커서를 가리키면. 정상적인 상태에서는 비용이 발생합니다. 디스플레이:없음,즉, 표시되지 않습니다. 마우스를 올리면 블록으로 표시됩니다. 그게 전부 비밀이에요. 이제 목록 요소를 약간 장식하고 아이콘을 삽입해 보겠습니다.

/*목록 항목 스타일*/ .droplink li a( 패딩:5px 12px 4px 34px; 여백:1px; 배경색:#484A47; 디스플레이:블록; 색상:#FFF; 텍스트 장식:없음; 글꼴 크기:12px ; background-repeat:no-repeat; background-position: 10px 3px ) /*호버 요소 스타일*/ .droplink li a:hover( background-color:#999 ) /*아이콘*/ .facebook a (배경 이미지) :url("icons/facebook.png")) .twitter a (배경-이미지:url("icons/twitter.png")) .vk a (배경-이미지:url("icons/vk.png")) .rss a (배경 이미지:url("icons/rss.png")) .gplus a (배경 이미지:url("icons/gplus.png"))

실제로 그게 전부입니다. 드롭다운 목록이 준비되었으며 매우 보기 좋습니다. 재량에 따라 요소를 디자인하고 둥근 모서리와 기타 종소리와 휘파람을 추가할 수 있습니다.

마우스를 가져갈 때 목록이 아래 텍스트와 "겹치게" 하려면 옆면을 보십시오. Z-색인.

불분명하거나 잘 안 되는 부분이 있으면 댓글로 질문하시거나 '메시지 보내기' 버튼을 이용해 주세요. —>

설명

꼬리표 아래와 같이 드롭다운 목록 형태로 인터페이스 요소를 생성할 수 있을 뿐만 아니라 단일 또는 다중 선택이 가능한 목록도 생성할 수 있습니다. 최종 모양은 태그의 크기 속성 사용에 따라 달라집니다. 목록의 높이를 설정합니다. 목록의 너비는 태그에 지정된 가장 넓은 텍스트에 따라 결정됩니다. , 스타일을 사용하여 변경할 수도 있습니다. 각 항목은 태그를 사용하여 생성됩니다. , 컨테이너에 중첩되어야 함 . 목록 데이터를 서버로 보내려는 경우 요소를 배치해야 합니다. 양식 내부. 이는 스크립트를 통해 목록 데이터에 액세스할 때도 필요합니다.

통사론

제1항 포인트 2

속성

일부 키보드 단축키를 사용하여 목록으로 이동할 수 있습니다. 페이지가 로드된 후 포커스를 받을 목록을 설정합니다. 요소에 대한 액세스 및 수정을 차단합니다. 목록을 양식과 연결합니다. 한 번에 여러 목록 항목을 선택할 수 있습니다. 서버로 전송되거나 스크립트를 통해 액세스할 요소의 이름입니다. 양식을 제출하기 전에 목록을 선택해야 합니다. 표시할 목록 줄 수입니다. Tab 키를 누를 때 요소 간 전환 순서를 정의합니다.

닫는 태그

필수의.

HTML5 IE Cr Op Sa Fx

영웅을 선택하세요 체브라시카 악어 제나 샤포크약 쥐 라리사

드롭다운 메뉴라고도 불리는 콤보 상자는 유연하고 편리한 양식 요소 중 하나입니다. 설정에 따라 목록에서 하나 이상의 값을 선택할 수 있습니다. 목록의 장점은 간결함과 다양성입니다. 목록은 하나 또는 여러 줄을 차지할 수 있으며 목록에서 하나 이상의 값을 선택할 수 있습니다. 콤보박스는 다음과 같이 생성됩니다.

제1항 포인트 2

꼬리표 목록 항목의 컨테이너 역할을 하며 드롭다운 목록인지, 단일 또는 다중 선택 목록인지 여부를 결정합니다. 모양은 태그의 크기 속성 사용에 따라 달라집니다. , 목록의 높이를 설정합니다. 목록의 너비는 내부 텍스트의 길이에 따라 자동으로 결정됩니다. . 다음은 Ctrl 및 Shift 키와 드롭다운 목록을 사용하여 항목을 강조 표시하는 다중 선택 목록입니다.

태그 속성

태그 속성을 살펴보겠습니다.

, 목록 표시를 변경할 수 있습니다.

다수의

다중 존재는 브라우저에게 요소의 내용을 표시하도록 지시합니다. 객관식 목록으로. 목록의 최종 모양은 사용된 크기 속성에 따라 달라집니다. 없으면 목록의 높이가 항목 수와 같습니다. 크기 값이 항목 수보다 작으면 세로 스크롤 막대가 나타납니다.

여러 목록 값을 선택하려면 마우스 커서와 함께 Ctrl 및 Shift 키를 사용하십시오.

예제 1에서는 객관식 목록을 만드는 방법을 보여줍니다.

예 1: 객관식 목록

HTML5 IE Cr Op Sa Fx

체브라시카 악어 제나 샤포크약 쥐 라리사

이름

고유한 요소 이름을 정의합니다. . 일반적으로 이 이름은 스크립트를 통해 데이터에 액세스하거나 서버측 처리기로 선택한 값을 검색하는 데 사용됩니다.

크기

목록의 높이를 설정합니다. 크기가 1과 같으면 목록이 드롭다운 목록으로 전환됩니다. 기본값은 다중 속성에 따라 다릅니다. 존재하는 경우 목록의 크기는 요소 수와 같습니다. 다중이 존재하지 않는 경우 크기 속성의 값은 1입니다.

태그 속성

꼬리표

또한 목록의 모양에 영향을 미치는 속성이 있으며 아래에 나와 있습니다.

선택된

현재 목록 항목을 강조 표시합니다. 태그의 경우

다중 속성이 추가되면 둘 이상의 항목을 선택할 수 있습니다.

값

서버로 전송될 목록 항목 값을 정의합니다. "이름/값" 쌍이 서버로 전송됩니다. 여기서 이름은 태그의 이름 속성에 의해 지정됩니다. 이며 값은 선택한 목록 항목의 값 속성입니다. 의미는 항목의 텍스트와 일치할 수도 있고 독립적일 수도 있습니다.

상표

목록 항목의 레이블을 표시하도록 설계되었으며 내부 텍스트와 비교하여 축약되었습니다.

. label 속성이 존재하는 경우 태그 내부의 텍스트는 무시되고 label의 값이 목록에 표시됩니다. Firefox 브라우저는 이 속성을 지원하지 않습니다.

목록 생성은 예제 2에 나와 있습니다.

예시 2: 목록 사용

HTML5 IE Cr Op Sa Fx

캐릭터를 선택하세요

체브라시카 악어 제나 샤포크약 쥐 라리사

목록 항목 그룹화

목록이 상당히 광범위한 경우 목록이 명확하고 작업하기 쉽도록 해당 요소를 블록으로 그룹화하는 것이 좋습니다. 태그는 이러한 목적으로 사용됩니다 . 내부에 태그가 위치한 컨테이너입니다. 하나의 그룹으로 합쳐졌습니다. 태그의 특징 일반적인 목록 요소처럼 강조 표시되지 않고 굵은 스타일을 사용하여 강조되며 이 컨테이너에 포함된 모든 요소가 원래 위치에서 오른쪽으로 이동된다는 점입니다. 그룹 제목을 추가하려면 예제 3과 같이 label 속성을 사용하세요.

예 3: 목록 항목 그룹화

HTML5 IE Cr Op Sa Fx

스낵 바르스카야 왕새우 속을 채운 왕새우 냄비에 비트 슬라브 만두 우크라이나 도넛 Kharkov 스타일로 로스팅

예제의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 그룹화된 목록

수평 드롭다운 메뉴사이트 탐색 구조를 구성하는 데 사용됩니다. 최적의 중첩 수준 수는 1 또는 2입니다. 첨부 파일 수준이 적을수록 사이트 방문자가 필요한 정보를 더 쉽게 찾을 수 있습니다. 일반 가로 메뉴를 만드는 방법은 에 자세히 설명되어 있습니다.

가로 드롭다운 메뉴를 만드는 방법

1. 하나의 중첩 수준이 있는 드롭다운 메뉴의 HTML 마크업 및 기본 스타일

가로 드롭다운 메뉴의 HTML 마크업은 원하는 목록 항목에 연결된다는 점에서 일반 메뉴와 다릅니다.

중첩된 목록이 추가되었습니다

또는<оl> .

기본 메뉴를 기준으로 하위 메뉴의 위치를 ​​지정하기 위해 다음 스타일이 선언됩니다.
— 드롭다운 목록이 중첩된 목록 요소의 경우: li (위치: 상대;) ;
— 드롭다운 메뉴 ul (위치: 절대;) 및 왼쪽 및 위쪽 값의 경우.

명확성과 서식 지정의 용이성을 위해 클래스 상단 메뉴를 기본 메뉴에 추가하고 하위 메뉴를 드롭다운 메뉴에 추가하겠습니다.

드롭다운 메뉴를 숨기는 방법에는 여러 가지가 있습니다.
1) 디스플레이: 없음;
2) 가시성: 숨김;
3) 불투명도: 0;
4) 변환: scaleY(0);
5) jQuery 라이브러리를 사용합니다.

방법 1. (표시: 없음;)

드롭다운 메뉴는 .submenu (display: none;) 를 사용하여 숨겨지고, 마우스를 올리면 .topmenu li:hover .submenu (display: block;) 을 사용하여 표시됩니다.

방법 2. (가시성: 숨김;)

메뉴는 .submenu (visibility: hided;) 를 사용하여 숨겨지고 .topmenu li:hover .submenu (visibility: visible;) 를 사용하여 표시됩니다.

방법 3. (불투명도: 0;)

메뉴는 .submenu (opacity: 0;) 를 사용하여 숨겨지고 .topmenu li:hover .submenu (opacity: 1;) 을 사용하여 표시됩니다. 메뉴가 있는 영역 위로 마우스를 가져갈 때 메뉴가 표시되지 않도록 하려면 visible: hide; , 마우스를 올리면 visible: visible;로 변경됩니다. .

방법 4. (변환: scaleY(0);)

메뉴는 .submenu (transform: scaleY(0);) 를 사용하여 숨겨지고 .topmenu li:hover .submenu (transform: scaleY(1);) 을 사용하여 표시됩니다. 기본 요소 변환은 중앙에서 발생하므로 .submenu (transform-origin: 0 0;) 에 대해 추가해야 합니다. 즉, 왼쪽 상단에서.

방법 5: jQuery 사용

$(".five li ul").hide(); // 드롭다운 메뉴 숨기기 $(".five li:has(".submenu")").hover(function())( $(".five li ul").stop().fadeToggle(300) ;) /* .submenu 클래스가 있는 요소가 포함된 목록 요소를 선택하고 여기에 드롭다운 메뉴를 표시하고 숨기는 호버 기능을 추가합니다 */);

2. 3D 드롭다운 메뉴

예를 들어 화면 깊이에서 메뉴가 나타나도록 하는 등 CSS3 변환을 사용하면 흥미로운 효과를 만들 수 있습니다.

* ( 상자 크기: 테두리 상자; ) 본문 ( 여백: 0; 배경: 방사형-그라디언트(#BFD6E2 1px, rgba(255,255,255,0) 2px); 배경 크기: 10px 10px; ) nav ul ( 목록 스타일 : 없음; 여백: 0; 패딩: 0; ) nav a ( 디스플레이: 블록; 텍스트 장식: 없음; 윤곽선: 없음; 전환: .4s easy-in-out; ) .topmenu ( 뒷면 가시성: 숨김; 배경 : rgba(255,255,255,.8); .topmenu > li ( 디스플레이: 인라인 블록; 위치: 상대; ) .topmenu > li > a ( 글꼴 계열: "Exo 2", sans-serif; 높이: 70px; 줄 -높이: 70px; 패딩: 0 30px; 글꼴 무게: 굵게; .down:after (content: "\f107"; margin-left: 8px; 글꼴 계열: FontAwesome; ) a:hover ( 색상: #E6855F; ) .submenu ( 배경: 흰색; 테두리: 2px 단색 #003559; 위치: 절대; 왼쪽: 0; 가시성: 숨김; 불투명도: 0; z-색인: 5; 너비: 150px; 변환: 원근감(600px) 회전X(-90deg); 변환 원점: 0% 0%; 전환: .6s 표시 가능; 불투명도: 1; 변환: 원근감(600px) 회전X(0deg); ) .submenu li a ( 색상: #7f7f7f; 글꼴 크기: 13px; 줄 높이: 36px; 패딩: 0 25px; 글꼴 계열: "Kurale", serif; )

3. 로고가 포함된 확장 가능한 드롭다운 메뉴

이 예에서는 페이지 상단 섹션에 로고와 사이트 탐색이 포함되어 있습니다. 로고는 그림이나 텍스트일 수 있습니다. 드롭다운 메뉴는 CSS3 변환 기능을 사용하여 상단 목록 항목 아래에서 점차 확장됩니다.

심벌 마크
* ( box-sizing: border-box; ) 본문 ( 여백: 0; 배경: #f2f2f2; ) 헤더 ( 배경: 흰색; 텍스트 정렬: 중앙; ) 헤더 a ( 텍스트 장식: 없음; 윤곽선: 없음; 표시 : 블록; 전환: .3s easy-in-out; ) .logo ( 색상: #D5B45B; 글꼴 계열: "Playfair Display", serif; 글꼴 크기: 2.5em; 패딩: 20px 0; ) nav ( 디스플레이: 테이블; 여백: 0 자동; ) nav ul ( 목록 스타일: 없음; 여백: 0; 패딩: 0; ) .topmenu:after ( 내용: ""; 디스플레이: 테이블; 지우기: 둘 다; ) .topmenu > li ( 너비: 25%; 부동: 왼쪽; 글꼴 계열: "Open Sans", .topmenu > li > a ( 텍스트 변환: 대문자; 글꼴 크기: 14px; 글꼴 무게: 굵게; 색상: # 404040; 패딩: 15px 30px; .topmenu li a:hover ( 색상: #D5B45B; ) .submenu-link:after ( content: "\f107"; 글꼴 계열: "FontAwesome"; 상속; 여백-왼쪽: 10px; .submenu ( 배경: #273037; 위치: 절대; 왼쪽: 0; 위쪽: 100%; z-색인: 5; 너비: 180px; 불투명도: 0; 변환: scaleY(0) ; 변환 원점: 0 0; 전환: 0.5초 Ease-In-Out; ) .submenu a ( 색상: 흰색; 텍스트 정렬: 왼쪽; 패딩: 12px 15px; 글꼴 크기: 13px; 테두리 하단: 1px 단색 rgba(255,255,255,.1); ) .submenu li:last-child a ( 테두리 하단: 없음; ) .topmenu > li:hover .submenu ( 불투명도: 1; 변환: scaleY(1); )

4. 드롭다운 메뉴 확장

드롭다운 메뉴의 또 다른 예입니다. 메뉴가 나타날 때 확대 효과는 초기 크기를 줄여서 구현됩니다.submenu (transform: scale(.8);) , 마우스를 올리면 크기가 증가합니다.topmenu > li:hover .submenu (transform: scale(1);) .

* ( box-sizing: border-box; ) 본문 ( 여백: 0; 배경: url(https://html5book.ru/wp-content/uploads/2015/10/Background54.png) ) nav ( 배경: 흰색; ) nav ul ( 목록 스타일: 없음; 여백: 0; 패딩: 0; ) nav a ( 텍스트 장식: 없음; 개요: 없음; 디스플레이: 블록; 전환: .4s easy-in-out; ) .topmenu ( 텍스트 정렬: 중앙; 패딩: 10px 0; .topmenu > li ( 디스플레이: 인라인 블록; 위치: 상대; ) .topmenu > li:after ( 내용: ""; 위치: 절대; 오른쪽: 0; 너비: 1px ; 높이: 12px; 배경: #d2d2d2; 상자-그림자: 4px -2px 0 #d2d2d2; .topmenu > li:last-child:after ( 배경: 없음; 상자 -그림자: 없음; ) > li > a ( 패딩: 12px 26px; 색상: #767676; 텍스트 변환: 대문자; 글꼴 두께: 굵게; 문자 간격: 1px; 글꼴 계열: "Exo 2", sans-serif; ) .topmenu li a:hover ( 색상: #c0a97a; ) .submenu ( 위치: 절대; 왼쪽: 50%; 위쪽: 100%; 너비: 210px; 왼쪽 여백: -105px; 배경: #fafafa ; 테두리: 1px 단색 #ededed; Z-인덱스: 5; 가시성: 숨김; 불투명도: 0; 변환: 스케일(.8); 전환: .4초 이지인아웃; ) .submenu li a ( padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; 글꼴 크기: 12px; 색상: #484848; 글꼴 계열: "Kurale", serif; ) .topmenu > li:hover .submenu ( 가시성: 표시; 불투명도: 1; 변환: scale(1); )

5. 풀업 드롭다운 메뉴

미니 애니메이션이 포함된 가로 메뉴: 상단 메뉴 링크 위로 마우스를 가져가면 드롭다운 메뉴 모양과 함께 작은 원이 나타납니다.

@import url("https://fonts.googleapis.com/css?.jpg); 배경 위치: 중앙 중앙; 배경 반복: 반복 없음; 배경 크기: 덮개; 높이: 100vh; 위치: 상대; ) 본문:앞( 내용: ""; 위치: 절대; 왼쪽: 0; 아래쪽: 0; 높이: 100%; 너비: 100%; 배경: 선형 그라데이션(45deg, rgba(0,0,0,0) , rgba(255,255,255,.8)); nav ( 텍스트 정렬: 센터; 패딩: 40px 0 0; ) nav ul ( 목록 스타일: 없음; 여백: 0; 패딩: 0; ) nav a ( 텍스트 장식: 없음; 디스플레이: 블록; 색상: #222; .topmenu > li ( 디스플레이: 인라인 블록; 위치: 상대; ) .topmenu > li > a ( 위치: 상대; 패딩: 10px 15px; 글꼴 계열: " ", 필기체; 글꼴 크기: 1.5em; 줄 높이: 1; 문자 간격: 3px; ) .topmenu > li > a:before ( content: ""; 위치: 절대; z-index: 5; 왼쪽: 50%; 너비: 10px; 배경: 테두리 반경: 50%; 불투명도: 0 .topmenu li:hover a:before ( 변환: 번역(-50%, 0); 불투명도: 1; ) .submenu ( 위치: 절대; z-색인: 4; 왼쪽: 50%; 위쪽: 100%; 너비: 150px; 패딩: 15px 0 15px; 여백-상단: 5px; 배경: 흰색; 테두리-반경: 5px; 상자 그림자: 0 0 30px rgba(0,0,0,.2); 상자 크기: 테두리 상자; 불투명도: 0; 변형(-50%, 20px) ) .topmenu > li:hover .submenu ( 가시성: 표시; 불투명도: 1; 변환: 번역(-50%, 0); ) .submenu a ( 글꼴 계열: "Libre Baskerville", serif; 글꼴 크기: 11px; 문자 간격: 1px; 패딩: 5px 10px; 전환: .3s 선형; .submenu a:hover (배경: #e8e8e8;)

HTML 옵션 태그는 사용자가 미리 정의된 값 집합에서 하나의 옵션을 선택할 수 있는 드롭다운 목록을 만드는 데 사용됩니다.

사용자에게 표시되는 텍스트는 값 속성에 지정된 텍스트와 다를 수 있습니다. 드롭다운 목록을 만드는 방법은 다음과 같습니다.

녹색 노란색 검은색

• 드롭다운 목록은 태그를 사용하여 생성됩니다. ;
  태그 내부
  선택 옵션은 태그를 사용하여 정의됩니다. ;
• 태그에서 value 속성을 사용하면 PHP, JS, Jquery 등을 사용하여 선택한 옵션에 액세스할 수 있습니다.

드롭다운 목록의 스타일을 지정하기 위해 ID를 사용하는 대신 CSS 클래스를 지정하는 것도 가능합니다.

다음 섹션에서는 JavaScript/JQuery에서 HTML 드롭다운 목록을 사용하는 예를 보여 드리겠습니다. 예제에서는 스타일을 설정하는 방법도 보여줍니다. CSS/CSS3을 사용하고 부트스트랩 프레임워크.

간단한 드롭다운 목록 생성 예

이 예에서는 HTML 선택 옵션을 사용하여 선택할 수 있는 세 가지 옵션이 있는 드롭다운 목록을 만듭니다.




위의 예에서는 다음 마크업을 사용하여 드롭다운 목록을 만듭니다.

5 10 15 20 25

값 속성 사용

앞서 언급했듯이 value 속성의 값은 페이지에 표시되는 텍스트와 다를 수 있습니다. 예를 들어 사용자에게 국가 이름이나 색상을 표시하고 값 속성에 단축 코드를 사용할 수 있습니다.

다음 예에서는 값 속성이 있는 드롭다운 목록을 만듭니다.


온라인 데모 및 코드 보기

태그의 경우 다음 코드가 사용됩니다:

적갈색 녹색 노란색 파란색 빨간색

JavaScript에서 선택한 옵션에 접근하는 예

이제 선택한 옵션의 값에 액세스하고 일부 작업을 수행하는 예를 만들어 보겠습니다. 색상 옵션을 사용하여 위의 예와 동일한 목록을 만듭니다. 선택한 후 버튼을 클릭하여 해당 색상을 문서에 적용합니다.


온라인 데모 및 코드 보기

옵션 값 HTML의 경우 다음 코드가 사용됩니다.

적갈색 녹색 노란색 파란색 빨간색 다른

다음 코드 줄은 JavaScript에서 옵션의 value 속성 값에 액세스하는 데 사용됩니다. :

var seltheme = document.getElementById(“selcolor”).value;

버튼을 클릭하면 드롭다운 목록에서 선택한 값을 변수에 할당하는 JS 함수가 호출됩니다. 이 값은 현재 문서에 색상을 적용하는 데 사용됩니다.

JQuery에서 표시되는 텍스트에 액세스

이번에는 JQuery를 사용하여 선택한 옵션의 값인 text와 value에 액세스하겠습니다. 이 데모에서는 HTML의 옵션 태그에 표시되는 텍스트에 액세스하겠습니다.


온라인 데모 및 코드 보기

태그의 각 옵션에 대한 코드

본문과 의미가 다릅니다. 색상을 선택하면 jQuery는 경고에 보이는 텍스트를 표시합니다. 태그 코드 다음:

적갈색 녹색 노란색 파란색 빨간색

이 값에 액세스하는 방법은 다음과 같습니다. HTML 선택 옵션이 선택됨 JavaScript:

var selectedcolor = $("#jquery선택 옵션:선택됨").text();

JQuery $.val() 메서드를 사용하여 값에 액세스할 수도 있습니다.

var selectedcolor = $("#jqueryselect").val();

위의 예에서 이 줄을 바꾸면 코드는 보이는 텍스트가 아닌 값 속성에 단축 코드/색상 값을 표시합니다.

PHP 스크립트에서 값을 가져오는 예

드롭다운 목록에서 선택한 옵션의 값을 가져오는 이 예에서는 태그를 사용하여 양식이 생성됩니다. 마크업 섹션에서. 드롭다운 목록에서 색상을 선택한 후 "제출" 버튼을 클릭하세요. 양식 데이터는 동일한 PHP 파일로 전달된 후 선택한 색상이 표시됩니다.


온라인 데모 및 코드 보기

예제에서 사용한 폼 메소드는 POST이므로 PHP $_POST[“”] 배열을 이용하여 폼 값을 가져올 수 있습니다. 다음은 예제에 사용된 양식 코드입니다.

색상을 선택하세요:

적갈색 녹색 노란색 파란색 빨간색

• 컴퓨터가 많이 느려지면 어떻게 해야 할까요?
• 단축 다이얼: Google Chrome 브라우저를 위한 최고의 시각적 북마크
• 스크립트 실행을 차단하는 브라우저 추가 기능을 비활성화하는 방법
• Google의 새로운 기술 "인스턴트 앱" – 정의 및 인스턴트 앱 업데이트 설치 방법
• 페이스북 '마이페이지' 로그인
• Facebook에 등록하고 페이지에 로그인하세요.
• 프린터 공유 문제 해결
• 프린터 공유 문제 해결
• Facebook 제한사항에 대해 알아야 할 사항
• 초보자를 위한 Linux 기초

• TeamViewer 제한 우회
• 무작위 비밀번호 생성기 암호 문구가 포함된 전화 비밀번호 생성기
• CSS를 사용하여 한 줄에 블록을 만드는 방법은 무엇입니까?
• 로컬 컴퓨터에 Joomla 설치
• 인터넷에서 어떤 흥미로운 것들을 찾을 수 있나요?
• Sony Ericsson Xperia Neo 리뷰: 기대에 부응
• 스마트 폰 Samsung GT I8160 Galaxy Ace II : 리뷰 및 사양
• 러시아의 Bla Bla Car 아날로그: 서비스에는 어떤 대안이 있으며 차이점은 무엇입니까?
• NewPipe는 Android에서 음악과 비디오를 다운로드할 수 있는 옵션이 있는 무료 YouTube 아날로그입니다.
• 웹 리소스의 페이지 호스팅 및 로딩 속도를 확인하는 방법 진실을 파악하는 두 가지 방법