Basic understanding and use of HTML select option_HTML/Xhtml_Web page production

Detailed explanation of HTML (select option) in javascript
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 tag value="value">Text Tags like this

1:options[ ]Attributes of array:
length attribute---------Length attribute
selectedIndex attribute--------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 (No. One text value, second text value, third text value, fourth text value...)
2: Attributes of a single option (---obj.options[ obj.selecedIndex] is a specified tag, which is a ---)
text attribute---------return/specify text
value attribute------ Return/specify a 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:

< script language="javascript">
function number(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("my "My eat", "4"); //Change the value of the currently selected one
//obj.options.add(new Option("My eat", "4")); and then add An option
//alert(obj.selectedIndex);//displays the serial number, option is set by itself
//obj.options[obj.selectedIndex].text = "My food"; change value
//obj.remove(obj.selectedIndex);Delete function
}




My bag
My notebook
My oilMy 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 objects 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. Delete 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 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 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].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 currently selected option The serial number
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 코드:

코드 복사


코드는 다음과 같습니다.

< ;/tr>






없음
;/td>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：3 ways to add links to html select tags_HTML/Xhtml_Web page productionNext article：3 ways to add links to html select tags_HTML/Xhtml_Web page production

Related articles

See more

• Summary of Html knowledge
• How to learn HTML quickly
• The difference between html xhtml xml
• The difference between src and href attributes
• About HTML5 and CSS replacement use

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved

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