JavaScript control of select tag (option option/select)_javascript skills

The select tag in html is also the asp:DropDownList control in asp.net.
Javascript's operations on them
1. Basic understanding

Copy code The code is as follows:

var e = document.getElementById("selectId");
e. options= new Option("text","value");
//Create an option object, That is, create one or more text
//options is an array, which can store multiple Text Tags like this

1: options[ ] array attributes:
length attribute---------length attribute
selectedIndex Attributes--------The index value of the text in the currently selected box. This index value is automatically allocated by the memory (0,1,2,3...) corresponding to (the first text value , the second text value, the third text value, the fourth text value...)
2: Attributes of a single option (---obj.options[obj.selecedIndex] It is a specified tag, which is a ---)
text attribute---------returns/specifies the text
value attribute------returns/specifies the value , consistent with .
index attribute-------returns the subscript,
selected attribute-------returns/specifies whether the object is selected. By specifying true or false, the selected item can be dynamically changed
defaultSelected attribute-----returns whether the object is selected by default. true/false.
3: option method
Add an tag-----obj.options.add(new("text","value"));
delete An label-----obj.options.remove(obj.selectedIndex)
Get the text of an label-----obj.options[obj.selectedIndex ].text
Modify the value of an tag-----obj.options[obj.selectedIndex]=new Option("New Text","New Value")Delete all tags-----obj.options.length = 0
Get the value of an tag-----obj.options[obj.selectedIndex].value
Note:
a: The above method is written like this type of method obj.options.function() instead of obj.funciton, because it is to consider compatibility under IE and FF, such as obj.add () is only valid in IE.
b: The option in obj.option does not need to be capitalized, and the option in new Option needs to be capitalized
2. Application

Copy code The code is as follows:

My bag
My notebook
My oil
My burden

1. Dynamically create select

Copy code The code is as follows:

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

2. Add option option

Copy code The code is as follows:

function addOption(){
//Find the object based on id,
var obj=document.getElementById('mySelect');
//Add an option
obj.add(new Option("text","value")); //This is only valid in IE
obj.options.add(new Option(" text","value")); //This is compatible with IE and firefox
}

3. Remove all options option

Copy code The code is as follows:

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

4. Delete an option option

Copy code The code is as follows:

function removeOne(){
var obj=document.getElementById( 'mySelect');
//index, the serial number of the option to be deleted, here take the serial number of the currently selected option
var index=obj.selectedIndex;
obj.options.remove(index);
}

5. Get the value of option

Copy the code The code is as follows:

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //Serial number, take the serial number of the currently selected option
var val = obj.options[index]. value;

6. Get the text of the option

Copy the code The code is as follows:

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //Serial number, take the serial number of the currently selected option
var val = obj.options[index] .text;

7. Modify option option

Copy code The code is as follows:

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //Serial number, take the serial number of the currently selected option
var val = obj.options[index]= new Option("New text","New value");

8. Delete select

Copy code The code is as follows:

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

change="choice()">

根据这些东西,自己用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 코드:




코드 복사

코드는 다음과 같습니다.

< ;td class="Search_content" id="yyfb">


tr>

="Edit_mustinput">*인용 소프트웨어:	type="button" class="Search_button_select" onClick="linkAgeTree(' linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1'); value="선택.. .">
*인용 분기:	구성 요소 제거:	thgjDm" style="width:160" id="thgjDm"> 없음