Detailed explanation of specific usage examples of javascript manipulation of DropDownList control

To use javascript to manipulate the DropDownList control, you must first understand the two most basic attributes of select (or DropDownList). One is the value attribute, the other is the text attribute, and the selectedIndex attribute is used to identify the currently selected item. Item (number), please refer to the sample code above for details.

Let’s get down to business, mainly introducing the following points:
(1) Clear the value in the DropDownList control. ​

document.getElementById('ddlCities').options.length = 0;

(2) Determine whether there is a ListItem with value 'Param1' in DropDownList.

function isListItemExist(objDdl , objItemValue) 
{ 
var isExist = false; 
for(var i in objSelect.options) 
　　{ 
　　　　if(i.value == objItemValue) 
　　　　{ 
　　　　　　isExist = true; 
　　　　　　break; 
　　　　} 
　　} 
　　return isExist; 
}

JavaScript and DropDownList

Transfer between server control DropDownList and Javascript

<script language="javascript"> 
function hehe() 
{ 
document.all(&#39;txtSdept&#39;).value =document.all(&#39;ddlSdept&#39;).options[document.all(&#39;ddlSdept&#39;).selectedIndex].text; 
} 
</script> 
<asp:DropDownList id="ddlSdept" style="Z-INDEX: 101; LEFT: 240px; POSITION: absolute; TOP: 112px" onchange="hehe()" runat="server"> 
<asp:ListItem Value="1">计算机系</asp:ListItem> 
<asp:ListItem Value="2">机械系</asp:ListItem> 
<asp:ListItem Value="3">电子系</asp:ListItem> 
<asp:ListItem Value="4">英语系</asp:ListItem> 
<asp:ListItem Value="5">中文系</asp:ListItem> 
</asp:DropDownList> 
<asp:TextBox id="txtSdept" style="Z-INDEX: 102; LEFT: 48px; POSITION: absolute; TOP: 112px" runat="server"></asp:TextBox>

1. How does js script access the value of server control

There is a TextBox control on the interface with the ID as Name. You can use the following script to get the value of Name in js

var myvalue=document.all('Name').value;

2. How does the server control get the value of the variable in js
I haven't found a better way yet. The method I usually use is to put a hidden control HtmlInputHidden on the interface, and then set it to run as a server control, so that the control can be accessed in js scripts and ASP.NET code. Value
Assign a value to the server control in js:

var bt＝document.all('Name').value; 
bt.value='名称';

Use Name.Value to access in ASP.NET.

3. How to traverse all TextBox elements on the interface

var inputList = document.body.getElementsByTagName("INPUT"); 
for(var i=0;i<inputList.length;i++) 
{ 
if(inputList.disabled==false && (inputList.type==&#39;text&#39; || inputList.type==&#39;password&#39;)) 
{ 
inputList.value=""; 
} 
}

4. Let the dropdownlist select the specified item
Select the item whose value in the dropdownlist is "I have to choose"

var handl=document.all('List1'); 
var my_value='我得选择'; 
for(var index=0;index<handle.options.length;index++) 
{ 
if(handle.options[index].text==my_value) 
{ 
handle.selectedIndex=index; 
} 
}

JS Cancel the selection of ListBox, Select, DropDownList options

Set which item of dropdownlist is the currently selected item in javascript

Method 1:

i = 2 
document.all.dropdownlistID.options[i].selected=true

Method 2:

obj.selectedIndex = 2;

Method 3:

obj.value="你要设的数值。"//Dropdownlist就会自动把那个值设为当前。 
javascript清除dropdownlist的项

//清除原有项 
function clearitem(){ 
var drp1 = document.getElementById("drp1"); 
while(drp1.options.length>0) 
{ 
drp1.options.remove(0); 
} 
}

Dynamic change method (obtain the city’s commercial district based on the city code and add it to the DropDownList (中)

function getsyq() 
{ 
var city = document.getElementById("DropDownList_Cities").value;　　//取得城市代码 
var htp = new ActiveXObject("Msxml2.XMLHTTP"); 
var drp1 = document.getElementById("drp1");　 
var url = "?stat=1&city="+city　　 
htp.open("post",url,true) 
htp.onreadystatechange=function() 
{ 
if(htp.readyState==4) 
{ 
　　　clearitem(); //清除原有下拉项 
var str = htp.responseText; 
var opt = str.split(','); 
var s = opt.length 
for(var j = 0;j<s;j++) 
{ 
var newOption = document.createElement("OPTION"); 　　//定义一个新的项 
var ff = opt[j].split(&#39;|&#39;); 
　　 newOption.text = ff[1]; 
　　 newOption.value = ff[1]; 
　　 drp1.options.add(newOption); 
　 } 
} 
} 
htp.send() 
}

The above is the detailed content of Detailed explanation of specific usage examples of javascript manipulation of DropDownList control. For more information, please follow other related articles on the PHP Chinese website!