Basic understanding and use of HTML select option

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> in the <select> tag
//options is an array, which can store multiple tags like <option value="value">text</option>

1: Properties of options[ ] array:
length attribute---------length attribute
The selectedIndex property is the index value of the text in the currently selected box. This index value is automatically allocated by memory (0, 1, 2, 3.....) corresponding to (the first text value, the second text value, the third text value, the fourth text value..........)
2: Properties of a single option (---obj.options[obj.selecedIndex] is a specified <option> tag, which is a---)
Text attribute---------Return/specify text
value attribute------returns/specifies the value, which is consistent with <options value="...">.
Index attribute-------Returns the subscript,
The selected property returns/specifies whether the object is selected. By specifying true or false, you can dynamically change the selected item.
defaultSelected property-----Returns whether the object is selected by default. true / false.
3: Option method adds an <option> tag-----obj.options.add(new("text","value"));
Delete an <option> tag-----obj.options.remove(obj.selectedIndex)<delete>
Get the text of an <option> tag-----obj.options[obj.selectedIndex].text<查>
Modify the value of an <option> tag-----obj.options[obj.selectedIndex]=new Option("new text","new value")<change>
Delete all <option> tags-----obj.options.length = 0
Get the value of an <option> tag-----obj.options[obj.selectedIndex].value
Notice:
a: The above method is written as obj.options.function() instead of obj.funciton, because it is compatible with IE and FF. For example, obj.add() is only valid in IE.
b: The option in obj.option does not need to be capitalized, but 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 Food","4"); //Change the value of the currently selected one
//obj.options.add(new Option("My food","4"));Add another option
//alert(obj.selectedIndex); //Display serial number, option is set by yourself
//obj.options[obj.selectedIndex].text = "My food"; change the 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>
<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 the object by 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

Copy code

The code is as follows:

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

4. Delete an 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 is the serial number of the currently selected option
var index=obj.selectedIndex;
obj.options.remove(index);
}

5. Get the value of option option

Copy code

The code is as follows:

var obj = document.getElementById('mySelect');
var index=obj.selectedIndex; //Serial number, get 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, get the serial number of the currently selected option
var val = obj.options[index].text;

7. Modify option

Copy code

The code is as follows:

var obj = document.getElementById('mySelect');
var index=obj.selectedIndex; //Serial number, get 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:

Based on these things, I used JQEURY AJAX+JSON to implement a small function as follows:
JS code: (only the code related to SELECT is taken)

Copy code

The code is as follows:

/**
* @description Component linkage drop-down list (implemented using JQUERY's AJAX and JSON)
* @prarm selectId drop-down list ID
* @prarm method The name of the method to be called
* @prarm temp The software ID is stored here
* @prarm url The address to jump to
*/
function linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get", //Use the get method to access the backend
dataType: "json", //Return data in json format
url: url, //backend address to access
data: "method=" + method+"&temp="+temp, //data to be sent
success: function(msg){//msg is the returned data, data binding is done here
var data = msg.lists;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description Convert JSON data into HTML data format
* @prarm selectId drop-down list ID
* @prarm nodeArray returned JSON array
*
*/
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.length;i++){
//create select Option
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//put Option to select
tempSelect.append(tempOption);
}
// Get the list of degraded components
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Clear the value of the drop-down list
* @prarm selectId drop-down list ID
* @prarm index The subscript position to start clearing
*/
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
while(length!=index){
//The length is changing because it must be re-acquired
length=document.getElementById(selectId).options.length;
for(var i=index;i<length;i++)
document.getElementById(selectId).options.remove(i);
length=length/2;
}
}
/**
* @description Get the list of degenerate components
* @prarm selectId1 references the ID of the software drop-down list
* @prarm selectId2 ID of the degenerate component drop-down list
*/
function getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1); //reference software drop-down list
var obj2=document.getElementById(selectId2); //Degenerate component drop-down list
var len=obj1.options.length;
//When the length of the referenced software list is equal to 1, return and do nothing
if(len==1){
return false;
}
// Clear the value of the drop-down list, both methods are OK
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i<len; i++){
var option = obj1.options[i];
//The reference software is selected and is not included
if(i!=obj1.selectedIndex){
//Clone OPTION and add it to SELECT
obj2.appendChild(option.cloneNode(true));
}
}
}

HTML code:

Copy code

The code is as follows:

<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td class="Search_item_18"> <span class="Edit_mustinput">*</span>Citation software:</td>
<td class="Search_content_82">
<input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" >
<input name="yyrjDm" id="yyrjDm" type="hidden" >
<input type="button" class="Search_button_select"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="Select...">
</td>
</tr>
<tr>
<td class="Search_item"> <span class="Edit_mustinput">*</span>Quote version:</td>
<td class="Search_content" id="yyfb">
<select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</select>
</td>
</tr>
<tr>
<td class="Search_item">Degraded components:</td>
<td class="Search_content" id="thgj">
<select name="thgjDm" style="width:160" id="thgjDm">
<option value="-1" selected>None</option>
</select>
</td>
</tr>
</TABLE>

<<: Detailed explanation of Vue two-way binding

>>: CSS3 uses animation attributes to achieve cool effects (recommended)