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

MySQL 8.0 New Features - Introduction to the Use of Management Port

Table of contents Preface Connection Management A...

React useMemo and useCallback usage scenarios

Table of contents useMemo useCallback useMemo We ...

A brief discussion on using virtual lists to optimize tables in el-table

Table of contents Preface Solution Specific imple...

What to do if the container started by docker run hangs and loses data

Scenario Description In a certain system, the fun...

Solve the problem of MYSQL connection port being occupied and introducing file path errors

This morning I planned to use Wampserver to build...

WeChat applet uniapp realizes the left swipe to delete effect (complete code)

WeChat applet uniapp realizes the left swipe to d...

Centos7 installation of MySQL8 tutorial

MySQL 8 new features: My personal opinion on MySQ...

Method of realizing automated deployment based on Docker+Jenkins

Use Code Cloud to build a Git code storage wareho...

Practice of multi-layer nested display of element table

There is a requirement for a list containing mult...

A few steps to easily build a Windows SSH server

The SSH mentioned here is called Security Shell. ...

Detailed explanation of the difference between uniapp and vue

Table of contents 1. Simple page example 2.uni-ap...

CSS to achieve the sticky effect of two balls intersecting sample code

This is an effect created purely using CSS. To pu...

js to achieve simple calendar effect

This article shares the specific code of js to ac...

WeChat applet realizes the function of uploading pictures

This article example shares the specific code for...

MySQL database operations and data types

Table of contents 1. Database Operation 1.1 Displ...