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으로 문의하세요.

이전 기사：HTML 선택 태그_HTML/Xhtml_웹페이지 제작에 링크를 추가하는 3가지 방법다음 기사：HTML 선택 태그_HTML/Xhtml_웹페이지 제작에 링크를 추가하는 3가지 방법

관련 기사

더보기

• HTML 지식 요약
• HTML을 빨리 배우는 방법
• html xhtml xml의 차이점
• src와 href 속성의 차이점
• HTML5 및 CSS 대체 사용 정보

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

회사 소개부인 성명Sitemap

© php.cn All rights reserved

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