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

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: 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 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 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); } function $(id) { return document.getElementById(id) } function show() { var selectObj=$("area") var myOption=document.createElement("option") myOption.setAttribute("value","10") myOption.appendChild(document.createTextNode("上海")) var myOption1=document.createElement("option") myOption1.setAttribute("value","100") myOption1.appendChild(document.createTextNode("南京")) selectObj.appendChild(myOption) selectObj.appendChild(myOption1) } function choice() { var index=$("area").selectedIndex; var val=$("area").options[index].getAttribute("value") if(val==10) { var i=$("context").childNodes.length-1; var remobj=$("context").childNodes[i]; remobj.removeNode(true) var sh=document.createElement("select") sh.add(new Option("浦东新区","101")) sh.add(new Option("黄浦区","102")) sh.add(new Option("徐汇区","103")) sh.add(new Option("普陀区","104")) $("context").appendChild(sh) } if(val==100) { var i=$("context").childNodes.length-1; var remobj=$("context").childNodes[i]; remobj.removeNode(true) var nj=document.createElement("select") nj.add(new Option("玄武区","201")) nj.add(new Option("白下区","202")) nj.add(new Option("下关区","203")) nj.add(new Option("栖霞区","204")) $("context").appendChild(nj) } } function calc() { var x=$("context").childNodes.length-1; alert(x) } function remove() { var i=$("context").childNodes.length-1; var remobj=$("context").childNodes[i]; remobj.removeNode(true) } 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;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&lt ;len; i ){ var option= obj1.options[i] //참조된 소프트웨어의 선택된 항목은 추가되지 않습니다. if(i!=obj1.selectedIndex){ //OPTION을 복제하고 SELECT obj2.appendChild(option.cloneNode(true))에 추가 } } }

HTML 코드:

코드 복사

코드는 다음과 같습니다. ;span class="Edit_mustinput">* 인용 소프트웨어:&lt ;/td> onClick=" linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" 선택..."> &lt ;/tr> * 견적 버전: 구성 요소 퇴화: 없음 ;/td>

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