The select tag in html is also the asp:DropDownList control in it.
JavaScript's operations on them
1. Basic understanding
var e = ("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 that can store multiple tags such as <option value="value">text</option>
1: Properties of options[ ] array:
length attribute-----------------------------------------------------------------------------------------------------------------------------
selectedIndex property---------------The index value of the text in the currently selected box. This index value is the (0, 1, 2, 3...) automatically allocated by memory (first text value, second text value, third text value, fourth text value.........)
2: The attribute of a single option (--[] is a specified <option> tag, which is a ---)
text attribute ------------------------------------------------------------------------------------------------------------------------------
The value attribute------Returns/Specify value, consistent with <options value="...">.
index attribute------------Return to the index,
selected property ----------Return/Specify whether the object is selected. By specifying true or false, the selected item can be changed dynamically
defaultSelected property -----Returns whether the object is selected by default. true / false.
3: The method of option
Add a <option> tag-----(new("text","value")); <increase>
Delete a <option> tag-----()<delete>
Get a <option> tag text -----[].text<check>
Modify the value of a <option> tag -----[]=new Option("new text","new value")<change>
Delete all <option> tags ----- = 0
Get the value of a <option> tag ------[].value
Notice:
a: The above is written as a method () of this type but not because in order to consider compatibility under IE and FF, such as () can only be valid in IE.
b: The option in the new Option needs to be capitalized.
2. Application
<html>
<head>
<script language="javascript">
function number(){
var obj = ("mySelect");
//[] = new Option("My Eat","4");//Change in the value of the currently selected one
//(new Option("My Eat","4"));Add another option
//alert();//Show the serial number, set by option yourself
//[].text = "My Eat"; Change the value
//();Delete function
}
</script>
</head>
<body>
<select >
<option>My bag</option>
<option>My notebook</option>
<option>My oil</option>
<option>My burden</option>
</select>
<input type="button" name="button" value="View result" onclick="number();">
</body>
</html>
1. Dynamically create select
function createSelect(){
var mySelect = ("select");
= "mySelect";
(mySelect);
}
2. Add option option
function addOption(){
//Finding the object based on id,
var obj=('mySelect');
//Add an option
(new Option("text","value")); //This can only be valid in IE
(new Option("text","value")); //This is compatible with IE and firefox
}
3. Delete all options
function removeAll(){
var obj=('mySelect');
=0;
}
4. Delete an option option
function removeOne(){
var obj=('mySelect');
//index, to delete the sequence number of the option, here is the sequence number of the currently selected option
var index=;
(index);
}
5. Get the value of option option
var obj=('mySelect');
var index=; //Serial number, take the currently selected option number,
var val = [index].value;
6. Obtain the text of option option
var obj=('mySelect');
var index=; //Serial number, take the currently selected option number,
var val = [index].text;
7. Modify option option
var obj=('mySelect');
var index=; //Serial number, take the currently selected option number,
var val = [index]=new Option("new text","new value");
8. Delete select
function removeSelect(){
var mySelect = ("mySelect");
(mySelect);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http:///TR/html4/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<head>
<script language=JavaScript>
function $(id)
{
return (id)
}
function show()
{
var selectObj=$("area")
var myOption=("option")
("value","10")
(("Shanghai"))
var myOption1=("option")
("value","100")
(("Nanjing"))
(myOption)
(myOption1)
}
function choice()
{
var index=$("area").selectedIndex;
var val=$("area").options[index].getAttribute("value")
if(val==10)
{
var i=$("context").-1;
var remobj=$("context").childNodes[i];
(true)
var sh=("select")
(new Option("Pudong New Area","101"))
(new Option("Huangpu District","102"))
(new Option("Xuhui District","103"))
(new Option("Putuo District","104"))
$("context").appendChild(sh)
}
if(val==100)
{
var i=$("context").-1;
var remobj=$("context").childNodes[i];
(true)
var nj=("select")
(new Option("Xuanwu District","201"))
(new Option("Baixia District","202"))
(new Option("Xiaguan District","203"))
(new Option("Qixia District","204"))
$("context").appendChild(nj)
}
}
function calc()
{
var x=$("context").-1;
alert(x)
}
function remove()
{
var i=$("context").-1;
var remobj=$("context").childNodes[i];
(true)
}
</script>
<body><div >
<select on
change="choice()">
</select>
</div>
<input type=button value="Show" onclick="show()">
<input type=button value="calc()">
<input type=button value="delete" onclick="remove()">
</body>
</html>
Based on these things, I implemented a small function as follows using JQEURY AJAX+JSON:
JS code: (only taken from SELECT related code)
/**
* @description component linkage drop-down list (implemented with JQUERY's AJAX and JSON)
* @prarm selectId The ID of the drop-down list
* @prarm method The name of the method to be called
* @prarm temp Store the software ID here
* @prarm url Address to jump
*/
function linkAgeJson(selectId,method,temp,url){
$({
type: "get",//Use the get method to access the background
dataType: "json",//Return data in json format
url: url,//The background address to access
data: "method=" + method"temp="+temp,//The data to be sent
success: function(msg){//msg is the returned data, and data binding is done here
var data = ;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description Convert JSON data to HTML data format
* @prarm selectId The ID of the drop-down list
* @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<;i++){
//create select Option
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//put Option to select
(tempOption);
}
// Get the list of degraded components
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Clear the value of the drop-down list
* @prarm selectId The ID of the drop-down list
* @prarm index The index position to start clearing
*/
function isClearSelect(selectId,index){
var length=(selectId).;
while(length!=index){
//The length is changing, because it must be re-acquisitioned
length=(selectId).;
for(var i=index;i<length;i++)
(selectId).(i);
length=length/2;
}
}
/**
* @description Get the list of degenerate components
* @prarm selectId1 The ID of the reference software drop-down list
* @prarm selectId2 ID of the degraded component drop-down list
*/
function getCpgjThgl(selectId1,selectId2){
var obj1=(selectId1);//Reference software drop-down list
var obj2=(selectId2);//Degraded component drop-down list
var len=;
//Return when the length of the reference software list is equal to 1, no operation is performed
if(len==1){
return false;
}
//Clear the value of the drop-down list, both ways are OK
// isClearSelect(selectId2,'1');
(selectId2).length=1;
for(var i=0;i<len; i++){
var option= [i];
//The selected item of the reference software will not be added
if(i!=){
//Clone OPTION and add it to SELECT
((true));
}
}
}
HTML code:
<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1>
<tr>
<td class="Search_item_18"> <span class="Edit_mustinput">*</span>Cite software:</td>
<td class="Search_content_82">
<input name="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" >
<input name="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>Cited sub-version:</td>
<td class="Search_content" >
<select name="yyfbDm" style="width:160" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</select>
</td>
</tr>
<tr>
<td class="Search_item">Degraded component:</td>
<td class="Search_content" >
<select name="thgjDm" style="width:160" >
<option value="-1" selected>None</option>
</select>
</td>
</tr>
</TABLE>
JavaScript's operations on them
1. Basic understanding
Copy the codeThe code is as follows:
var e = ("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 that can store multiple tags such as <option value="value">text</option>
1: Properties of options[ ] array:
length attribute-----------------------------------------------------------------------------------------------------------------------------
selectedIndex property---------------The index value of the text in the currently selected box. This index value is the (0, 1, 2, 3...) automatically allocated by memory (first text value, second text value, third text value, fourth text value.........)
2: The attribute of a single option (--[] is a specified <option> tag, which is a ---)
text attribute ------------------------------------------------------------------------------------------------------------------------------
The value attribute------Returns/Specify value, consistent with <options value="...">.
index attribute------------Return to the index,
selected property ----------Return/Specify whether the object is selected. By specifying true or false, the selected item can be changed dynamically
defaultSelected property -----Returns whether the object is selected by default. true / false.
3: The method of option
Add a <option> tag-----(new("text","value")); <increase>
Delete a <option> tag-----()<delete>
Get a <option> tag text -----[].text<check>
Modify the value of a <option> tag -----[]=new Option("new text","new value")<change>
Delete all <option> tags ----- = 0
Get the value of a <option> tag ------[].value
Notice:
a: The above is written as a method () of this type but not because in order to consider compatibility under IE and FF, such as () can only be valid in IE.
b: The option in the new Option needs to be capitalized.
2. Application
Copy the codeThe code is as follows:
<html>
<head>
<script language="javascript">
function number(){
var obj = ("mySelect");
//[] = new Option("My Eat","4");//Change in the value of the currently selected one
//(new Option("My Eat","4"));Add another option
//alert();//Show the serial number, set by option yourself
//[].text = "My Eat"; Change the value
//();Delete function
}
</script>
</head>
<body>
<select >
<option>My bag</option>
<option>My notebook</option>
<option>My oil</option>
<option>My burden</option>
</select>
<input type="button" name="button" value="View result" onclick="number();">
</body>
</html>
1. Dynamically create select
Copy the codeThe code is as follows:
function createSelect(){
var mySelect = ("select");
= "mySelect";
(mySelect);
}
2. Add option option
Copy the codeThe code is as follows:
function addOption(){
//Finding the object based on id,
var obj=('mySelect');
//Add an option
(new Option("text","value")); //This can only be valid in IE
(new Option("text","value")); //This is compatible with IE and firefox
}
3. Delete all options
Copy the codeThe code is as follows:
function removeAll(){
var obj=('mySelect');
=0;
}
4. Delete an option option
Copy the codeThe code is as follows:
function removeOne(){
var obj=('mySelect');
//index, to delete the sequence number of the option, here is the sequence number of the currently selected option
var index=;
(index);
}
5. Get the value of option option
Copy the codeThe code is as follows:
var obj=('mySelect');
var index=; //Serial number, take the currently selected option number,
var val = [index].value;
6. Obtain the text of option option
Copy the codeThe code is as follows:
var obj=('mySelect');
var index=; //Serial number, take the currently selected option number,
var val = [index].text;
7. Modify option option
Copy the codeThe code is as follows:
var obj=('mySelect');
var index=; //Serial number, take the currently selected option number,
var val = [index]=new Option("new text","new value");
8. Delete select
Copy the codeThe code is as follows:
function removeSelect(){
var mySelect = ("mySelect");
(mySelect);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http:///TR/html4/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<head>
<script language=JavaScript>
function $(id)
{
return (id)
}
function show()
{
var selectObj=$("area")
var myOption=("option")
("value","10")
(("Shanghai"))
var myOption1=("option")
("value","100")
(("Nanjing"))
(myOption)
(myOption1)
}
function choice()
{
var index=$("area").selectedIndex;
var val=$("area").options[index].getAttribute("value")
if(val==10)
{
var i=$("context").-1;
var remobj=$("context").childNodes[i];
(true)
var sh=("select")
(new Option("Pudong New Area","101"))
(new Option("Huangpu District","102"))
(new Option("Xuhui District","103"))
(new Option("Putuo District","104"))
$("context").appendChild(sh)
}
if(val==100)
{
var i=$("context").-1;
var remobj=$("context").childNodes[i];
(true)
var nj=("select")
(new Option("Xuanwu District","201"))
(new Option("Baixia District","202"))
(new Option("Xiaguan District","203"))
(new Option("Qixia District","204"))
$("context").appendChild(nj)
}
}
function calc()
{
var x=$("context").-1;
alert(x)
}
function remove()
{
var i=$("context").-1;
var remobj=$("context").childNodes[i];
(true)
}
</script>
<body><div >
<select on
change="choice()">
</select>
</div>
<input type=button value="Show" onclick="show()">
<input type=button value="calc()">
<input type=button value="delete" onclick="remove()">
</body>
</html>
Based on these things, I implemented a small function as follows using JQEURY AJAX+JSON:
JS code: (only taken from SELECT related code)
Copy the codeThe code is as follows:
/**
* @description component linkage drop-down list (implemented with JQUERY's AJAX and JSON)
* @prarm selectId The ID of the drop-down list
* @prarm method The name of the method to be called
* @prarm temp Store the software ID here
* @prarm url Address to jump
*/
function linkAgeJson(selectId,method,temp,url){
$({
type: "get",//Use the get method to access the background
dataType: "json",//Return data in json format
url: url,//The background address to access
data: "method=" + method"temp="+temp,//The data to be sent
success: function(msg){//msg is the returned data, and data binding is done here
var data = ;
coverJsonToHtml(selectId,data);
}
});
}
/**
* @description Convert JSON data to HTML data format
* @prarm selectId The ID of the drop-down list
* @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<;i++){
//create select Option
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
//put Option to select
(tempOption);
}
// Get the list of degraded components
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description Clear the value of the drop-down list
* @prarm selectId The ID of the drop-down list
* @prarm index The index position to start clearing
*/
function isClearSelect(selectId,index){
var length=(selectId).;
while(length!=index){
//The length is changing, because it must be re-acquisitioned
length=(selectId).;
for(var i=index;i<length;i++)
(selectId).(i);
length=length/2;
}
}
/**
* @description Get the list of degenerate components
* @prarm selectId1 The ID of the reference software drop-down list
* @prarm selectId2 ID of the degraded component drop-down list
*/
function getCpgjThgl(selectId1,selectId2){
var obj1=(selectId1);//Reference software drop-down list
var obj2=(selectId2);//Degraded component drop-down list
var len=;
//Return when the length of the reference software list is equal to 1, no operation is performed
if(len==1){
return false;
}
//Clear the value of the drop-down list, both ways are OK
// isClearSelect(selectId2,'1');
(selectId2).length=1;
for(var i=0;i<len; i++){
var option= [i];
//The selected item of the reference software will not be added
if(i!=){
//Clone OPTION and add it to SELECT
((true));
}
}
}
HTML code:
Copy the codeThe 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>Cite software:</td>
<td class="Search_content_82">
<input name="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" >
<input name="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>Cited sub-version:</td>
<td class="Search_content" >
<select name="yyfbDm" style="width:160" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</select>
</td>
</tr>
<tr>
<td class="Search_item">Degraded component:</td>
<td class="Search_content" >
<select name="thgjDm" style="width:160" >
<option value="-1" selected>None</option>
</select>
</td>
</tr>
</TABLE>