HTML 선택 옵션의 기본 이해 및 사용_HTML/Xhtml_웹페이지 제작

javascript의 HTML(옵션 선택)에 대한 자세한 설명
1. 기본 이해:

코드 복사

코드는 다음과 같습니다.

var e = document.getElementById("selectId")
e.options= new Option("text","value")
//Create 옵션 객체, 즉 하나 이상의 text을 생성합니다.
//options는 여러 <옵션을 저장할 수 있는 배열입니다. tag value="value">Text 다음과 같은 태그

1:options[ ]배열 속성:
length 속성------ --Length 속성
selectedIndex 속성---------현재 선택된 상자에 있는 텍스트의 인덱스 값입니다. 이 인덱스 값은 메모리에 의해 자동으로 할당됩니다(0,1,2,3...). (번호. 하나의 텍스트 값, 두 번째 텍스트 값, 세 번째 텍스트 값, 네 번째 텍스트 값...)
2: 단일 옵션의 속성(---obj.options[ obj.selecedIndex]은 지정된 <입니다. ;option> 태그(---)
텍스트 속성---------텍스트
값 속성 반환/지정------ <와 일치하는 값 반환/지정 ;옵션 값="...">.
index 속성---------아래 첨자를 반환하고,
selected 속성-------객체 선택 여부를 반환/지정합니다. true 또는 false를 지정하면 선택한 항목이 동적으로 변경될 수 있습니다.
defaultSelected 속성-----객체가 기본적으로 선택되어 있는지 여부를 반환합니다. 참/거짓.
3: 옵션 메소드
태그 추가 -----obj.options.add(new("text","value")); ;option> 라벨------obj.options.remove(obj.selectedIndex)
라벨의 텍스트를 가져옵니다.----obj.options[obj.selectedIndex ]. text
태그 값 수정----obj.options[obj.selectedIndex]=new Option("New Text","New Value")
모든 태그 삭제------obj.options.length = 0
태그 값 가져오기------obj.options[obj.selectedIndex].value
참고:
a: 위 메소드는 obj.add()와 같이 IE 및 FF에서의 호환성을 고려하기 때문에 obj.funciton 대신 obj.options.function()과 같은 유형의 메소드로 작성됩니다. IE에서만 유효합니다.
b: obj.option의 옵션은 대문자로 표기할 필요가 없으며, 새 옵션의 옵션은 대문자로 표기해야 합니다.

2. 애플리케이션

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

< 스크립트 언어="javascript">
함수 번호(){
var obj = document.getElementById("mySelect")
//obj.options[obj.selectedIndex] = new Option("my "My eat", "4"); //현재 선택된 값 변경
//obj.options.add(new Option("My eat", "4")); 그런 다음 옵션
//alert(obj.selectedIndex);//일련번호를 표시하고 옵션은 자체적으로 설정됩니다
//obj.options[obj.selectedIndex].text = "My food"; 값 변경
//obj.remove(obj.selectedIndex);함수 삭제
}


select id=" mySelect">
내 가방
내 노트북
내 부담

1. 동적으로 선택

코드 복사

코드는 다음과 같습니다.

function createSelect(){ var mySelect = document.createElement("select") mySelect.id = "mySelect";

document.body.appendChild(mySelect);

2. 옵션 추가



코드 복사

코드는 다음과 같습니다.

function addOption(){

//id를 기준으로 개체 찾기, var obj = document.getElementById('mySelect'); //옵션 추가obj.add(new Option("text","value")) //이것은 IE에서만 유효합니다obj .options.add(new Option("text","value")); //IE 및 Firefox와 호환됩니다

}

3. 모든 옵션 옵션 삭제

코드 복사

코드는 다음과 같습니다.

function RemoveAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}

4. 옵션 옵션

코드 복사

코드는 다음과 같습니다.

function RemoveOne( ){
var obj=document.getElementById('mySelect');
//index, 삭제할 옵션의 일련 번호, 여기에 현재 선택된 옵션의 일련 번호를 가져옵니다.
var index= obj.selectedIndex;
obj.options.remove(index);
}

5. 옵션 값을 가져옵니다.

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

var obj=document.getElementById('mySelect')
var index=obj. selectedIndex; //일련번호, 현재 선택된 옵션의 일련번호 가져오기
var val = obj.options[index].value;

6. >

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

var obj=document.getElementById(' mySelect');

var index=obj.selectedIndex; //일련번호, 현재 선택된 옵션의 일련번호 가져오기
var val = obj.options[index].text; 🎜>7. 옵션 옵션 수정

코드 복사

코드는 다음과 같습니다. var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //일련번호, 현재 선택된 옵션을 사용합니다. 일련번호

var val = obj.options[index]=new Option("새 텍스트","새 값")

8. 삭제 선택

코드 복사

코드는 다음과 같습니다.

function RemoveSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}


<머리>

<머리>
<스크립트 언어=JavaScript>
function $(id)
{
return document.getElementById(id)
}
function show()
{
var selectObj=$("area")
var myOption=document.createElement("option")
myOption.setAttribute("value","10")
myOption.appendChild(document.createTextNode("上海上"))
var myOption1= document.createElement("option")
myOption1.setAttribute("value","100")
myOption1.appendChild(document.createTextNode("南京"))
selectObj.appendChild(myOption)
selectObj.appendChild(myOption1)
}
함수 선택()
{
var index=$("area").selectedIndex;
var val=$("area").options[index].getAttribute("value")
if(val==10)
{
var i=$("context") .childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh=document.createElement("select")
sh.add(new Option("浦东新区","101"))
sh.add( new Option("黄浦区","102"))
sh.add(new Option("徐汇区","103"))
sh.add(new Option("普陀区","104 "))
$("context").appendChild(sh)
}
if(val==100)
{
var i=$("context").childNodes. 길이-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj=document.createElement("select")
nj.add(new Option("玄武区","201"))
nj.add( new Option("白下区","202"))
nj.add(new Option("下关区","203"))
nj.add(new Option("栖霞区", "204"))
$("context").appendChild(nj)
}
}
function calc()
{
var x=$("context") .childNodes.length-1;
alert(x)
}
function delete()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}

<본문>

<
change="choice()"에서 id="area"를 선택하세요.>

根据这些东西,自己用 JQEURY AJAX JSON实现了一个小功能如下:
JS代码:(只取了于SELECT상关代码)

复主代码

代码如下:

/**
* @description 컴포넌트 연결 드롭다운 목록(JQUERY의 AJAX 및 JSON을 사용하여 구현됨)
* @prarm selectId 드롭다운 목록의 ID
* @prarm method 호출할 메서드 이름
* @prarm temp this
에 소프트웨어 ID 저장* @prarm url
으로 이동할 주소*/
함수 linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//사용 get 메소드는 백엔드에 액세스합니다
dataType: "json",//json 형식으로 데이터를 반환합니다
url: url,//액세스할 백엔드 주소
data: "method=" method "&temp= " temp, //전송할 데이터
success: function(msg){//msg는 반환된 데이터입니다. 여기서 데이터 바인딩을 수행하세요
var data = msg.lists;
coverJsonToHtml(selectId,data) ;
}
});
}
/**
* @description JSON 데이터를 HTML 데이터 형식으로 변환
* @prarm selectId 드롭다운 목록의 ID
* @prarm nodeArray 반환된 JSON 배열
*
*/
functioncoverJsonToHtml(selectId,nodeArray){
//선택
var tempSelect= $ j("#" selectId);//선택 값 지우기
isClearSelect(selectId,'0')
var tempOption=null
for(var i=0;i//선택 옵션 만들기
tempOption= $j('' nodeArray[i].mc '< / 옵션> 🎜>}
/**
* @description 드롭다운 목록의 값 지우기
* @prarm selectId 드롭다운 목록의 ID
* @prarm index 지우기를 시작할 인덱스 위치
*/
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length
while( length!= index){
//길이를 다시 가져와야 하므로 길이가 변경됩니다.
length=document.getElementById(selectId).options.length
for(var i=index;idocument.getElementById(selectId).options.remove(i)
length=length/2;
}
}
/**
* @description 저하된 구성 요소 목록 가져오기
* @prarm selectId1 소프트웨어 드롭다운 목록의 ID 참조
* @prarm selectId2 저하된 구성 요소 드롭다운 목록의 ID
*/
function getCpgjThgl (selectId1,selectId2){
var obj1=document.getElementById(selectId1);//참조 소프트웨어 드롭다운 목록
var obj2=document.getElementById(selectId2);//구성 요소 퇴화 목록
var len= obj1.options.length;
//참조된 소프트웨어 목록의 길이가 1과 같을 때 반환, 아무 작업도 수행되지 않음
if(len==1){
return false;
}
// 드롭다운 목록의 값을 지웁니다. 두 가지 방법을 모두 사용할 수 있습니다.
// isClearSelect(selectId2,'1')
document.getElementById(selectId2).length =1;
for(var i=0;i< ;len; i ){
var option= obj1.options[i]
//참조된 소프트웨어의 선택된 항목은 추가되지 않습니다.
if(i!=obj1.selectedIndex){
//OPTION을 복제하고 SELECT
obj2.appendChild(option.cloneNode(true))에 추가
}
}
}


HTML 코드:

코드 복사


코드는 다음과 같습니다.

< ;/tr>






없음
;/td>

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

Repo : 팀원을 부활시키는 방법

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법

4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

스플릿 소설을이기는 데 얼마나 걸립니까?

3 몇 주 전 By DDD

R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?

3 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7338

9

자바 튜토리얼

1627

14

Cakephp 튜토리얼

1352

46

라라벨 튜토리얼

1265

25

PHP 튜토리얼

1210

29

더보기

Related knowledge

HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까? Feb 07, 2025 am 11:57 AM

이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다

HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

See all articles

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved

;span class="Edit_mustinput">*인용 소프트웨어:< ;/td>	onClick=" linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" 선택...">
*견적 버전:
구성 요소 퇴화: