HTML_HTML/Xhtml_Web 페이지 제작 시 select 태그의 단일 선택 및 다중 선택 사용법에 대한 자세한 설명-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML_HTML/Xhtml_Web 페이지 제작 시 select 태그의 단일 선택 및 다중 선택 사용법에 대한 자세한 설명

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:37 PM

html태그 선택단일 선택객관식

select 요소는 단일 선택 또는 다중 선택 메뉴를 만듭니다. 양식이 제출되면 브라우저는 선택한 항목을 제출하거나 쉼표로 구분된 여러 옵션을 수집하여 단일 매개변수 목록으로 결합하고
> ;

2. Select 요소는 다중 선택에도 사용할 수 있습니다. 다음 코드를 참조하세요.

코드 복사코드는 다음과 같습니다.

//multiple 속성을 사용하면 여러 번 선택할 수 있습니다
//다음과 같습니다. size 속성이 설정된 경우, 세 개의 데이터가 표시됩니다. 다중 선택은 허용되지 않습니다.

코드 복사

코드는 다음과 같습니다.

@param objSelectId 확인할 대상 선택 구성 요소의 ID @param objItemValue 존재 여부를 확인할 값 function isSelectItemExit(objSelectId,objItemValue) { var objSelect = document.getElementById(objSelectId); var isExit = false

if (null != objSelect && typeof(objSelect) != "정의되지 않음") {

for(var i=0;iif( objSelect.options[i].value == objItemValue) {
isExit =
break;
}
}
return isExit;
}

2. 선택 옵션에 항목 추가

코드 복사

코드는 다음과 같습니다.

@param objSelectId 항목에 추가할 대상 선택 구성 요소의 ID
@param objItemText 추가할 항목의 내용
@param objItemValue 추가할 항목의 값
function addOneItemToSelect(objSelectId ,objItemText,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "정의되지 않음") {
//값이 항목인지 확인
if(isSelectItemExit(objSelectId,objItemValue)) {
$.messager.alert('Prompt message','이 값을 가진 옵션이 이미 존재합니다!' ,'info');
} else {
var varItem = new Option(objItemText,objItemValue)
objSelect.options.add(varItem)
}
}
}

3. 선택 옵션에서 선택한 항목을 삭제합니다. 다중 선택 및 다중 삭제를 지원합니다

코드 복사

코드는 다음과 같습니다.

@param objSelectId 삭제할 대상 선택 구성 요소 ID
function RemoveSelectItemsFromSelect(objSelectId) {
var objSelect = document.getElementById (objSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != "정의되지 않음") {
for(var i=0;iif(objSelect .options[i].selected) {
objSelect.options.remove(i);
delNum = delNum 1
i - 1 ;
}
}
if (delNum $.messager.alert('메시지', '삭제할 옵션을 선택하세요!', '정보') ;
} else {
$.messager .alert('prompt message',''delNum' 옵션이 성공적으로 삭제되었습니다!','info')
}
}
}

옵션에 지정된 값에 따라 항목 삭제를 선택합니다

코드는 다음과 같습니다.

@param objSelectId 확인할 대상 선택 컴포넌트의 id
@param objItemValue 존재 여부를 확인할 값
function RemoveItemFromSelectByItemValue( objSelectId,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefine") {
//존재 여부 확인
if(isSelectItemExit(objSelect,objItemValue)) {
for(var i=0;i< ;objSelect.options.length;i ) {
if(objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
$.messager.alert('Message','삭제되었습니다!','info'); 🎜>} else {
$.messager.alert('Message','No 지정된 값을 가진 옵션이 있습니다!','info')
}
}
}

5. 선택 항목 모두 지우기

코드 복사코드는 다음과 같습니다

for(var i=0;iobjSelect.options.remove(i)
}
}
}

6. select의 모든 항목을 가져오고 모든 값을 쉼표로 구분된 문자열로 조합합니다.

코드 복사

코드는 다음과 같습니다.

@param objSelectId 대상 선택 구성 요소 ID @return에 있는 모든 항목의 값을 반환합니다. 선택, 쉼표로 구분 function getAllItemValuesByString(objSelectId) {

var selectItemsValuesStr = "";

var objSelect = document.getElementById(objSelectId)

if (null != objSelect && typeof(objSelect) != "정의되지 않음") {
var length = objSelect.options.length
for(var i = 0; i if (0 == i) {
selectItemsValuesStr = objSelect.options[i].value;
} else {
selectItemsValuesStr = selectItemsValuesStr "," objSelect.options[i].value;
return selectItemsValuesStr
}

7. 선택한 모든 옵션을 다른 선택 항목으로 이동

복사 코드

코드는 다음과 같습니다.

@param fromObjSelectId 이동된 항목의 원래 선택 구성 요소 ID
@param toObjectSelectId 이동된 항목이 입력할 대상 선택 구성 요소 ID
function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById(fromObjSelectId);
var delNum = 0
if (null != objSelect && typeof(objSelect) != "정의되지 않음") {
for(var i=0;iif(objSelect.options[i].selected) {
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i]. 값)
objSelect.options.remove(i);
i = i - 1
}
}
}
}

8. 모든 옵션을 다른 선택으로 이동

코드 복사

코드는 다음과 같습니다.

@param fromObjSelectId 이동된 항목의 원래 선택 구성 요소 ID
@param toObjectSelectId 이동된 항목이 입력할 대상 선택 구성 요소 ID
function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById (fromObjSelectId);
if (null != objSelect) {
for(var i=0;iaddOneItemToSelect(toObjectSelectId,objSelect.options[ i].text ,objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1
}
}
}

성명

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

관련 기사

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式，希望对大家有所帮助！

html中document是什么Jun 17, 2022 pm 04:18 PM

在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.