Basic understanding and use of HTML select option_HTML/Xhtml_Web page production-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

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

May 16, 2016 pm 04:40 PM

html option select

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 <option value="value">text</option>
//options is an array, which can store multiple <options in the <select> tag value="value">Text</option> 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 <option> tag, which is a ---)
text attribute---------return/specify text
value attribute------ Return/specify a value, consistent with <options value="...">.
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 <option> tag-----obj.options.add(new("text","value"));<add>
delete An <option> label-----obj.options.remove(obj.selectedIndex)<Remove>
Get the text of an <option> label-----obj.options[obj.selectedIndex ].text<Check>
Modify the value of an <option> tag-----obj.options[obj.selectedIndex]=new Option("New Text","New Value")<Change&gt ;
Delete all <option> tags-----obj.options.length = 0
Get the value of an <option> 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:

<html>
<head>
< 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
}
</script>
</head>
<body>
<select id=" mySelect">
<option>My bag</option>
<option>My notebook</option>
<option>My oil</option&gt ;
<option>My burden</option>
</select>
<input type="button" name="button" value="View results" onclick="number ();">
</body>
</html>

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:

根据这些东西,自己用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<nodeArray .length;i ){
//선택 옵션 만들기
tempOption= $j('<option value="' nodeArray[i].dm '">' 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;i<length; i )
document.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 코드:

코드 복사

코드는 다음과 같습니다.

<TABLE width="100%" border=0 align= "left" cellPadding=0 cellSpacing=1> <tr> <td class="Search_item_18"> ;span class="Edit_mustinput">*</span>인용 소프트웨어:&lt ;/td> <td class="Search_content_82">

Statement of this Website

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