기본적인 이해:
var e = document.getElementById("selectId");
e.옵션= new Option("텍스트","값");
//옵션 개체를 생성합니다. 즉, <select> 태그에 하나 이상의 <option value="value">text</option>을 생성합니다.
//옵션은 <option value="value">text</option>과 같은 여러 태그를 저장할 수 있는 배열입니다.
1: 옵션[ ] 배열의 속성:
길이 속성---------길이 속성
selectedIndex 속성---------현재 선택된 상자에 있는 텍스트의 인덱스 값입니다. 이 인덱스 값은 (첫 번째 텍스트 값에 해당하는 메모리 (0,1,2,3...)에 의해 자동으로 할당됩니다. , 두 번째 텍스트 값, 세 번째 텍스트 값, 네 번째 텍스트 값...)
2: 단일 옵션의 속성 (---obj.options[obj.selecedIndex]는 지정된 <option> 태그이며 ---입니다)
텍스트 속성---------텍스트 반환/지정
값 속성------<옵션 값="...">과 일치하는 값을 반환/지정합니다.
인덱스 속성---------아래 첨자를 반환합니다.
selected 속성 ------- 객체가 선택되었는지 여부를 반환/지정합니다. true 또는 false를 지정하면 선택한 항목이 동적으로 변경될 수 있습니다.
defaultSelected 속성----객체가 기본적으로 선택되어 있는지 여부를 반환합니다. 참/거짓.
3: 옵션 방법
<option> 태그 추가----obj.options.add(new("text","value"));<add>
<option> 태그 삭제----obj.options.remove(obj.selectedIndex)<delete>
<option> 태그의 텍스트 가져오기----obj.options[obj.selectedIndex].text<check>
<option> 태그 값 수정----obj.options[obj.selectedIndex]=new Option("new text","new value")<change>
모든 <option> 태그 제거 -----obj.options.length = 0
<option> 태그의 값 가져오기----obj.options[obj.selectedIndex].value
알아채다:
a: 위의 메소드는 obj.funciton 대신 obj.options.function()과 같은 유형의 메소드로 작성되었습니다. 예를 들어 obj.add()는 IE에서만 유효하기 때문에 IE와 FF에서의 호환성을 고려하기 때문입니다. .
b: obj.option의 옵션은 대문자로 표기할 필요가 없으며, new Option의 Option은 대문자로 표기해야 합니다.
두 가지 응용 프로그램
다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<스크립트 언어="자바스크립트">
함수번호(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat","4");//현재 선택된 값 변경
//obj.options.add(new Option("My food","4"));다른 옵션 추가
//alert(obj.selectedIndex);//일련번호 표시, 옵션은 자체적으로 설정됩니다.
//obj.options[obj.selectedIndex].text = "내 음식" 변경 값;
//obj.remove(obj.selectedIndex) 삭제 함수
}
</script>
</head>
<본문>
<select id="mySelect">
<option>내 가방</option>
<option>내 노트</option>
<option>나의 기름</option>
<option>내 부담</option>
</select>
<input type="button" name="button" value="결과 보기" onclick="number();">
</body>
</html>
이러한 내용을 바탕으로 JQEURY AJAX+JSON을 사용하여 다음과 같은 작은 함수를 구현했습니다.
JS 코드: (SELECT 관련 코드만 가져옴)
다음과 같이 코드 코드를 복사합니다.
/**
* @description 구성 요소 연결 드롭다운 목록(JQUERY의 AJAX 및 JSON을 사용하여 구현됨)
* @prarm selectId 드롭다운 목록의 ID
* @prarm method 호출할 메소드의 이름
* @prarm temp 소프트웨어 ID가 여기에 저장됩니다.
* @prarm url 이동할 주소
*/
함수 linkAgeJson(selectId,method,temp,url){
$j.아약스({
유형: "get",//백그라운드에 액세스하려면 get 메소드를 사용하십시오.
dataType: "json",//json 형식으로 데이터를 반환합니다.
url: url,//액세스할 백엔드 주소
data: "method=" + method+"&temp="+temp,//전송할 데이터
성공: function(msg){//msg는 반환된 데이터이고 데이터 바인딩은 여기에서 수행됩니다.
var 데이터 = msg.lists;
CoverJsonToHtml(selectId,data);
}
});
}
/**
* @description JSON 데이터를 HTML 데이터 형식으로 변환합니다.
* @prarm selectId 드롭다운 목록의 ID
* @prarm nodeArray가 JSON 배열을 반환했습니다.
*
*/
함수 CoverJsonToHtml(selectId,nodeArray){
//선택을 얻습니다
var tempSelect=$j("#"+selectId);
//선택값 지우기
isClearSelect(selectId,'0');
var 임시 옵션=null;
for(var i=0;i<nodeArray.length;i++){
//선택 옵션 생성
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//옵션을 넣어 선택
tempSelect.append(tempOption);
}
// 성능이 저하된 구성 요소 목록을 가져옵니다.
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description 드롭다운 목록의 값을 지웁니다.
* @prarm selectId 드롭다운 목록의 ID
* @prarm index 클리어가 시작되는 인덱스 위치
*/
함수 isClearSelect(selectId,index){
var 길이=document.getElementById(selectId).options.length;
while(길이!=인덱스){
//다시 얻어야 하기 때문에 길이가 변경됩니다.
길이=document.getElementById(selectId).options.length;
for(var i=index;i<length;i++)
document.getElementById(selectId).options.remove(i);
길이=길이/2;
}
}
/**
* @description 성능이 저하된 구성 요소 목록을 가져옵니다.
* @prarm selectId1은 소프트웨어 드롭다운 목록의 ID를 나타냅니다.
* @prarm selectId2 퇴화 구성 요소 드롭다운 목록의 ID
*/
함수 getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1);//참조 소프트웨어 드롭다운 목록
var obj2=document.getElementById(selectId2);//구성 요소 드롭다운 목록 퇴화
var len=obj1.options.length;
//참조된 소프트웨어 목록의 길이가 1과 같을 때 반환되고 아무런 작업도 수행되지 않습니다.
if(len==1){
거짓을 반환;
}
//드롭다운 목록의 값을 지웁니다. 두 가지 방법을 모두 사용할 수 있습니다.
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i<len; i++){
var 옵션= obj1.options[i];
//소프트웨어에서 참조하는 선택된 항목은 추가되지 않습니다.
if(i!=obj1.selectedIndex){
//OPTION을 복제하고 SELECT에 추가
obj2.appendChild(option.cloneNode(true));
}
}
}
HTML 코드:
다음과 같이 코드 코드를 복사합니다.
<TABLE 테두리=0 align="왼쪽" cellPadding=0 cellSpacing=1>
<tr>
<td> <span>*</span>인용 소프트웨어:</td>
<TD>
<입력 이름="yyrjMc" id="yyrjMc" type="text" tabindex="3" size="30" >
<입력 이름="yyrjDm" id="yyrjDm" type="숨김" >
<입력 유형="버튼"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1'); value="선택...">
</td>
</tr>
<tr>
<td> <span>*</span>인용 버전:</td>
<td id="yyfb">
<select name="yyfbDm" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</select>
</td>
</tr>
<tr>
<td>구성요소 퇴화:</td>
<td id="thgj">
<select name="thgjDm" id="thgjDm">
<option value="-1" selected>없음</option>
</select>
</td>
</tr>
</TABLE>