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

jQuery solves the problem of not executing the original event after adding elements

Let's take a look at my error code first. htm...

Summary of common functions of PostgreSQL regular expressions

Summary of common functions of PostgreSQL regular...

Javascript Basics: Detailed Explanation of Operators and Flow Control

Table of contents 1. Operator 1.1 Arithmetic oper...

Solve the problem that changes to the Docker MySQL container database do not take effect

Using the official MySQL image requires some modi...

Brief analysis of centos 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar

Baidu Cloud Disk: Link: https://pan.baidu.com/s/1...

Use of MySQL DDL statements

Preface The language classification of SQL mainly...

Use Docker Compose to quickly deploy ELK (tested and effective)

Table of contents 1. Overview 1.1 Definition 1.2 ...

Install Centos7 using Hyper-v virtual machine

Table of contents introduce Prepare Download syst...

React High-Order Component HOC Usage Summary

One sentence to introduce HOC What is a higher-or...

In-depth understanding of MySQL master-slave replication thread state transition

Preface The basic principle of MySQL master-slave...

Detailed explanation of how to prevent content from being selected, copied, or right-clicked in HTML pages

Sometimes, we don't want the content presente...

JS Decorator Pattern and TypeScript Decorators

Table of contents Introduction to the Decorator P...

Reasons and optimization solutions for slow MySQL limit paging with large offsets

In MySQL, we usually use limit to complete the pa...

Don’t bother with JavaScript if you can do it with CSS

Preface Any application that can be written in Ja...

Detailed explanation of views in MySQL

view: Views in MySQL have many similarities with ...