js 선택 옵션 개체 summary_javascript 기술

기본 이해:

var e = document.getElementById("selectId")

e.options= new Option("텍스트","값")

//옵션 개체를 만듭니다. 즉, 태그에 하나 이상의 text

//options는 text

1:옵션 속성[ ] 배열:

길이 속성---------길이 속성

selectedIndex 속성---------현재 선택된 상자에 있는 텍스트의 인덱스 값입니다. 이 인덱스 값은 (No)에 해당하는 메모리(0,1,2,3...)에 의해 자동으로 할당됩니다. . 하나의 텍스트 값, 두 번째 텍스트 값, 세 번째 텍스트 값, 네 번째 텍스트 값.....)

2: 단일 옵션의 속성

(---obj.options[obj.selecedIndex]는 지정된 태그이며 ---입니다.) 텍스트 속성---------텍스트 반환/지정

값 속성------과 일치하는 값을 반환/지정합니다.

색인 속성---------아래 첨자를 반환합니다.

selected 속성 ------- 객체가 선택되었는지 여부를 반환/지정합니다. true 또는 false를 지정하면 선택한 항목이 동적으로 변경될 수 있습니다.

defaultSelected 속성-----객체가 기본적으로 선택되어 있는지 여부를 반환합니다. 참/거짓.

3: 옵션 방법

태그 추가 -----obj.options.add(new("text","value"));

태그 삭제----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.funciton 대신 이런 유형의 메소드 obj.options.function()처럼 작성됩니다. 왜냐하면 IE와 FF에서의 호환성을 고려하기 위해 obj.add()와 같은 메소드는 오직 IE에서 유효합니다.

b: obj.option의 옵션은 대문자로 표기할 필요가 없으며, new Option의 Option은 대문자로 표기해야 합니다.

두 번째 신청

코드 복사

코드는 다음과 같습니다. <script> </script>

함수(){

var obj = document.getElementById( "mySelect" );
//obj.options[obj.selectedIndex] = new Option("My Eat","4");//현재 선택된 값 변경
//obj.options .add(new Option("My Eat","4"));다른 옵션 추가
//alert(obj.selectedIndex);//일련번호 표시, 옵션이 자동으로 설정합니다.
// obj .options[obj.selectedIndex].text = "My Chichi";값 변경
//obj.remove(obj.selectedIndex);함수 삭제
}




내 가방
  내 기름
  내 부담
value="결과 보기" onclick="number();">



이를 바탕으로 작은 다음과 같이 JQEURY AJAX JSON을 사용하는 함수:

JS 코드 : (SELECT 관련 코드만 가져옴)

코드 복사

코드는 다음과 같습니다.

/**
* @description 컴포넌트 연결 드롭다운 목록(JQUERY의 AJAX 및 JSON을 사용하여 구현됨)
* @prarm selectId 드롭다운 목록의 ID
* @prarm method 호출할 메서드 이름
* @prarm temp this 소프트웨어 ID 저장
* @prarm url 이동할 주소
*/
function linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//사용 get 메소드는 백엔드에 액세스합니다
dataType: "json",//json 형식으로 데이터를 반환합니다
url: url,//액세스할 백엔드 주소
data: "method=" method "&temp= " temp, //전송할 데이터
성공: function(msg){//msg는 반환된 데이터이고 데이터 바인딩은 여기에서 수행됩니다.
var data = msg.lists;
CoverJsonToHtml(selectId,data );
                                                                                                                             
/**
* @description JSON 데이터를 HTML 데이터 형식으로 변환 * @prarm selectId 드롭다운 목록의 ID

* @prarm nodeArray 반환된 JSON 배열
*
*/
function CoverJsonToHtml(selectId,nodeArray){
//get 선택
var tempSelect=$j("#" selectId)
//clear 값 선택
isClearSelect(selectId,'0');
var tempOption=null
for(var i=0;i//선택 옵션
tempOption= $j('' nodeArray[i].mc ' ')//선택할 옵션 입력
tempSelect.append(tempOption);
}
                                                                                                          
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length; length!=index){
//길이가 변경됩니다. 다시 가져와야 하기 때문입니다.
         length=document.getElementById(selectId).options.length i); 🎜> }
}

/**
* @description 드롭다운 목록의 값 지우기
* @prarm selectId 드롭다운 목록의 ID
* @prarm index 지우기를 시작할 첨자 위치
*/
function getCpgjThgl(selectId1,selectId2){
var obj1 =document.getElementById(selectId1);//참조 소프트웨어 드롭 -down list
var obj2=document.getElementById(selectId2);//Degenerate 컴포넌트 드롭다운 목록
var len=obj1.options.length;
// 참조된 소프트웨어 목록의 길이가 초과되면 반환 1이면 작업이 수행되지 않습니다.
if(len==1){
          return false
  }
  //드롭다운 목록의 값을 지우고 두 가지 방법을 모두 사용할 수 있습니다.
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1
for(var i=0;ivar option = obj1.options[i];
//참조된 소프트웨어의 선택된 항목은 추가되지 않습니다
if(i!=obj1.selectedIndex){
//OPTION을 복제하고 SELECT에 추가합니다
obj2.appendChild(option.cloneNode(true))
}
}

}


HTML 코드:




코드 복사


코드는 다음과 같습니다.

 


 
 


 
 


 

*引用软件：	onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择...">
*引用分版：
退化构件：	无