HTML select option detailed description

This article introduces the detailed explanation of HTML select option

javascriptThe detailed explanation of HTML (select option)

1. Basic understanding:

var e =document.getElementById("selectId");

e. options=newOption("text","value");

//Create an optionobject, that is, create one or moretext

/ in thetag /options is anarray, which can store multiple tags liketext1: options[ ] arrayAttribute:length attribute---------Length attributeselectedIndex attribute--------The text in the currently selected box Index value, 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] is a specifiedtag, which is a-- -)text attribute---------return/specify textvalue attribute------return/specify value, same asConsistent.index attribute-------returns the subscript,selected attribute-------returns/specifies whether the object is selected. By specifying true or false, you can Dynamically change the selected itemdefaultSelected attribute-----Returns whether the object is selected by default. true/false.3:Option methodAdd antag-----obj.options.add(new("text","value"));Delete antag-----obj.options.remove(obj.selectedIndex)Get the text of antag -----obj.options[obj.selectedIndex].textModify the value of antag -----obj.options[obj.selectedIndex]=new Option ("new text","new value")Delete alltags-----obj.options.length = 0Get a< ;option>The value of the label-----obj.options[obj.selectedIndex].valueNote:a:The above is written as a method of this type obj.options .function() is not written as obj.funciton because it is for compatibility under IE and FF. For example, obj.add() is only valid in IE.b: option in obj.option No capitalization is required, the Option in new Option needs to be capitalized2. Application
< ;option>My bag
My notebook
My oil
My burden

onclick="number() ;">

1. Dynamically create select

function createSelect(){

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

2 .Add option option

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. Delete all options option

function removeAll(){
var obj=document.getElementById('mySelect');

obj.options.length=0;

}

4. Delete an option option

function removeOne(){
var obj=document.getElementById('mySelect');

//index, the serial number of the option to be deleted, take here The serial number of the currently selected option

var index=obj.selectedIndex;
obj.options.remove(index);
}

5. Get the value of option

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

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 the option option

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

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

Based on these things, I used JQEURY AJAX+JSONto implement a small function as follows:

JS code: (only the code related to SELECT is taken)

/** * @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现) * @prarm selectId 下拉列表的ID * @prarm method 要调用的方法名称 * @prarm temp 此处存放软件ID * @prarm url 要跳转的地址 */ function 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数组 * */ function coverJsonToHtml(selectId,nodeArray){ //get select var tempSelect=$j("#"+selectId); //clear select value isClearSelect(selectId,'0'); var tempOption=null; for(var i=0;i'+nodeArray[i].mc+' '); //put Option to select tempSelect.append(tempOption); } // 获取退化构件列表 getCpgjThgl(selectId,'thgjDm'); } /** * @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
        

         Copy after login
        
       

##HTML code:

 
 
 *引用软件：
 
    
 
 
 
 *引用分版：
 
   
 
 
 
退化构件：
 
  无  
 
 

The above is the detailed content of HTML select option detailed description. For more information, please follow other related articles on the PHP Chinese website!