Basic understanding and use of HTML select option

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:

function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<head>
<script language=JavaScript>
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("Pudong New Area","101"))
sh.add(new Option("Huangpu District","102"))
sh.add(new Option("Xuhui District","103"))
sh.add(new Option("Putuo District","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("Xuanwu District","201"))
nj.add(new Option("白下区","202"))
nj.add(new Option("Xiaguan District","203"))
nj.add(new Option("Qixia District","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)
}
</script>
<body>
<div id="context">
<select id="area" on
change="choice()">
</select>
</div>
<input type=button value="Show" onclick="show()">
<input type=button value="Calculate node" onclick="calc()">
<input type=button value="Delete" onclick="remove()">
</body>
</html>

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)

Recommend

How to publish static resources in nginx

step Place the prepared static resource files in ...

Detailed explanation of grep and egrep commands in Linux

rep / egrep Syntax: grep [-cinvABC] 'word'...

How to import Tomcat source code into idea

Table of contents 1. Download the tomcat code 2. ...

How to quickly build a static website on Alibaba Cloud

Preface: As a junior programmer, I dream of build...

Detailed explanation of the life cycle of Angular components (Part 2)

Table of contents 1. View hook 1. Things to note ...

Experience sharing by a front-end supervisor with 7 years of practical experience

Today, I am sharing the valuable experience of a ...

Understand the principle of page replacement algorithm through code examples

Page replacement algorithm: The essence is to mak...

Develop calculator example code using native javascript

The main function of a calculator is to perform n...

MySQL 8.0.18 Hash Join does not support left/right join left and right join issues

In MySQL 8.0.18, a new Hash Join function was add...

VMware installation of Ubuntu 20.04 operating system tutorial diagram

Memo: Just experience it. Record: NO.209 This exa...

How to view and clean up Docker container logs (tested and effective)

1. Problem The docker container logs caused the h...

Manually implement the two-way data binding principle of Vue2.0

In one sentence: Data hijacking (Object.definePro...

Implementation of one-click TLS encryption for docker remote api

Table of contents 1. Change the 2375 port of Dock...

A brief discussion on an efficient algorithm for constructing tree structures in JavaScript

Table of contents introduction Ideas Establish ID...

How to set the select to be read-only and not editable and the select value to be passable

1. <select style="width:195px" name=&...