For example, a <asp:LinkButton> control is rendered as a <a> anchor control, and the DropDownList control here is rendered as a normal select control, A Web server control DropDownList and a common select control (primarily for comparison) are defined in the following ASP.net page.
Code
Copy Code code as follows:
<asp:dropdownlist ID = "ddlcities" runat = "server" >
<asp:listitem Value = "0" > Changsha </asp:ListItem>
<asp:listitem Value = "1" > Beijing </asp:ListItem>
<asp:listitem Value = "2" > Tianjin </asp:ListItem>
<asp:listitem Value = "3" > Mohe </asp:ListItem>
</asp:DropDownList>
<select id = "Ddlnames" runat = "server" >
<option value = "0" >James</option>
<option value = "1" >Green</option>
<option value = "2" >Lily</option>
<option value = "3" >Lucy</option>
</select>
Viewing the page in a browser and clicking on the source file, it is easy to see that the ASP.net page is rendered in the following format:
Code
Copy Code code as follows:
<select name= "ddlcities" id= "Ddlcitys" >
<option value= "0" > Changsha </option>
<option value= "1" > Beijing </option>
<option value= "2" > Tianjin </option>
<option value= "3" > Mohe </option>
</select>
<select name= "Ddlnames" id= "Ddlnames" >
<option value= "0" >James</option>
<option value= "1" >Green</option>
<option value= "2" >Lily</option>
<option value= "3" >Lucy</option>
</select>
Okay, so here's the thing to manipulate the DropDownList control with JavaScript, you first have to understand the two most basic properties of select (or DropDownList), one is the Value property, the other is the Text property, There is also a SelectedIndex property that identifies the currently selected item (number), which is shown in the example code above.
The following official point of order, mainly introduced as follows:
(1) Empty the value in the DropDownList control.
document.getElementById (' ddlcities '). options.length = 0;
(2) to determine whether there is a ListItem value of ' Param1 ' in DropDownList.
Copy Code code as follows:
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
Copy Code code as follows:
<script language= "JavaScript" >
function hehe ()
{
document.all (' txtsdept '). Value =document.all (' ddlsdept '). Options[document.all (' ddlsdept '). 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" > Computer Department </asp:ListItem>
<asp:listitem value= "2" > Mechanical Department </asp:ListItem>
<asp:listitem value= "3" > Electronic Department </asp:ListItem>
<asp:listitem value= "4" > English Department </asp:ListItem>
<asp:listitem value= "5" > Chinese Department </asp:ListItem>
</asp:DropDownList>
<asp:textbox id= "txtsdept" style= "z-index:102; left:48px; Position:absolute; top:112px "runat=" Server ></asp:TextBox>
Reference articles:
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title> Untitled Document </title>
<script language= "JavaScript" >
function moveselected (SELECT, down)
{
if (Select.selectedindex!=-1)
{
if (down)
{
if (Select.selectedindex!= select.options.length-1)
var i = Select.selectedindex + 1;
Else
Return
}
Else
{
if (select.selectedindex!= 0)
var i = select.selectedindex-1;
Else
Return
}
var swapoption = new Object ();
Swapoption.text = Select.options[select.selectedindex].text;
Swapoption.value = Select.options[select.selectedindex].value;
swapoption.selected = select.options[select.selectedindex].selected;
swapoption.defaultselected = select.options[select.selectedindex].defaultselected;
For (Var property in swapoption)
Select.options[select.selectedindex][property] = Select.options[property];
For (Var property in swapoption)
Select.options[property] = Swapoption[property];
}
}
<form id= "FormName" name= "FormName" >
<select name= "Selectname" id= "Selectname" size= "8" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
<input id= "moveUp" onclick= "moveselected (This.form.selectName, False)" type= "button" value= "Move Up"/>
<input id= "MoveDown" onclick= "moveselected (This.form.selectName, False)" type= "button" value= "Move Down"/>
</form>
1, JS script How to access the value of the server control
There is a TextBox control on the interface, and the ID Name,js can take the value of name in the following script
var myvalue=document.all (' Name '). Value;
2, server control how to take the value of the variable in JS
There is no good way to find out, I usually use the method is to put a hidden control on the interface HtmlInputHidden, and then set to run as a server control, so that in the JS script and ASP.net code can access the value of the control
To assign a value to a server control in JS:
var bt=document.all (' Name '). Value;
bt.value= ' name ';
Asp. NET, using Name.value to access.
3. How to traverse all the TextBox elements on the interface
Copy Code code as follows:
var inputlist = document.body.getElementsByTagName ("INPUT");
for (Var i=0;i<inputlist.length;i++)
{
if (Inputlist.disabled==false && (inputlist.type== ' text ' | | | | inputlist.type== ' password '))
{
Inputlist.value= "";
}
}
4, let DropDownList select to the specified item
Select DropDownList value as "I have to choose"
Copy Code code as follows:
var handl=document.all (' List1 ');
var my_value= ' I have to choose ';
for (Var index=0;index{
if (Handle.options[index].text==my_value)
{
Handle.selectedindex=index;
}
}
JS uncheck the listbox,select,dropdownlist option
Copy Code code as follows:
<asp:listbox id= "ListBox1" runat= "Server" >
<asp:listitem text= "1" value= "1" ></asp:ListItem>
<asp:listitem text= "2" value= "2" ></asp:ListItem>
<asp:listitem text= "3" value= "3" ></asp:ListItem>
<asp:listitem text= "4" value= "4" ></asp:ListItem>
<asp:listitem text= "5" value= "5" ></asp:ListItem>
</asp:ListBox>
<script language= "javascript" type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#cel"). Click (function () {
$ ("#<%=listbox1.clientid%>"). Get (0). Selectedindex=-1;
});
});
</script>
<div id= "cel" style= "Cursor:pointer;" > Unbind </div>
DropDownList selected value
C#:
Copy Code code as follows:
Ddlprovince.selectedindex = DdlProvince.Items.IndexOf (DdlProvince.Items.FindByText ("Zhejiang"));
Javascript:
var requiredsdept=$ ("select[@id = ' ddlsdept '] option[@selected]"). Val ();
var requiredsdept = $ ("#ddlSdept option[@selected]"). Text ();
var select1 = document.all.<%= Ddlsdept.clientid%>;
var select1value = Select1.options[select1.selectedindex].value;
var select1text = Select1.options[select1.selectedindex].innertext;
Where Select1text is the selected value. If used in modal windows, you can use the following code:
window.returnvalue=select1text;//This is the value returned to the parent form
Window.close ();
In JavaScript, set DropDownList which is the current selected item
Method 1:
i = 2
Document.all.dropdownlistid.options[i].selected=true
Method 2:
Obj.selectedindex = 2;
Method 3:
Obj.value= "The number you want to set. "//dropdownlist will automatically set that value to the current.
JavaScript clears DropDownList items
Copy Code code as follows:
Clear Original item
function Clearitem () {
var DRP1 = document.getElementById ("Drp1");
while (drp1.options.length>0)
{
Drp1.options.remove (0);
}
}
Dynamic Change method (get the city's commercial area according to city code and add to DropDownList)
Copy Code code as follows:
function Getsyq ()
{
var city = document.getElementById ("Dropdownlist_cities"). Value; Get the city code
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 (); Clear the original dropdown
var str = Htp.responsetext;
var opt = str.split (', ');
var s = opt.length
for (var j = 0;j<s;j++)
{
var newoption = document.createelement ("option"); To define a new item
var ff = opt[j].split (' | ');
Newoption.text = ff[1];
Newoption.value = ff[1];
Drp1.options.add (newoption);
}
}
}
Htp.send ()
}
JavaScript implementation DropDownList (Select) three-level linkage without refreshing
Copy Code code as follows:
<script language=javascript>
function Countrychange () {
Countryid=document.getelementbyid ("Ddlcontry"). Value;
if (countryid==null| | countryid== "") {
Alert ("Please select Country");
Countrydel ("ddlprovince");/empty DropDownList
Countrydel ("ddlcity");/empty DropDownList
return false;
}
var countrystring= "";
var posturl=location.protocol+ "//" +location.hostname+ "//soleweb//ajaxenjine//areashow.aspx? Areaid= "+countryid;
Countrystring=openurl (PostURL);
if (countrystring== "-2") {//query failed
Alert ("Data query failed");
return false;
}
Split and write DropDownList
Countrydel ("ddlprovince");/empty DropDownList
Countrydel ("ddlcity");/empty DropDownList
if (countrystring== "") {
return false;
}
var stringarray=countrystring.split ("|");
for (Var i=0;i<stringarray.length;i++) {//rewrite DropDownList
Split an internal array
var optionarray=stringarray[i].split (",");
var newoption=document.createelement ("option");
NEWOPTION.TEXT=OPTIONARRAY[0];
NEWOPTION.VALUE=OPTIONARRAY[1];
document.getElementById ("Ddlprovince"). Options.add (newoption);
}
}
function Countrydel (areaname) {//Empty DropDownList
var Countnum=document.getelementbyid (areaname). Options.length;
for (Var i=1;i<countnum;i++) {//Empty DropDownList
document.getElementById (areaname). Remove (countnum-i);
}
}
function Provincechange () {
Countryid=document.getelementbyid ("Ddlprovince"). Value;
if (countryid==null| | countryid== "") {
Alert ("Please select the province");
Countrydel ("ddlcity");/empty DropDownList
return false;
}
var countrystring= "";
var posturl=location.protocol+ "//" +location.hostname+ "//soleweb//ajaxenjine//areashow.aspx? Areaid= "+countryid;
Countrystring=openurl (PostURL);
if (countrystring== "-2") {//query failed
Alert ("Data query failed");
return false;
}
Split and write DropDownList
Countrydel ("ddlcity");/empty DropDownList
if (countrystring== "") {
return false;
}
var stringarray=countrystring.split ("|");
for (Var i=0;i<stringarray.length;i++) {//rewrite DropDownList
Split an internal array
var optionarray=stringarray[i].split (",");
var newoption=document.createelement ("option");
NEWOPTION.TEXT=OPTIONARRAY[0];
NEWOPTION.VALUE=OPTIONARRAY[1];
document.getElementById ("Ddlcity"). Options.add (newoption);
}
}
function OpenURL (URL)
{
var objxml=new activexobject ("Microsoft.XMLHTTP")
Objxml.open ("Get", url,false);
Objxml.send ();
Retinfo=objxml.responsetext;
if (objxml.status== "200")
{
return retinfo;
}
Else
{
Return "-2";
}
}
</script>
HTML code
Copy Code code as follows:
<asp:dropdownlist id= "Ddlcontry" runat= "onchange=" Countrychange () "Onselectedindexchanged=" DdlContry_ SelectedIndexChanged ">
<asp:listitem value= "" > Please select the country you belong to </asp:ListItem>
</asp:DropDownList>
<asp:dropdownlist id= "ddlprovince" runat= "Server" onchange= "Provincechange" () "onselectedindexchanged=" Ddlprovince_selectedindexchanged ">
<asp:listitem value= "" > Please select the province you belong to </asp:ListItem>
</asp:DropDownList>
<asp:dropdownlist id= "ddlcity" runat= "Server" >
<asp:listitem value= "" > Please choose your own city </asp:ListItem>
</asp:DropDownList>
Aspx.cs Code
Copy Code code as follows:
protected void Page_Load (object sender, EventArgs e)
{
SoLe.Common.StringFormat sft = new SoLe.Common.StringFormat ();
String areaid = sft. HTML_FN (request.querystring["Areaid"). ToString ());
StringBuilder areastring = new StringBuilder ();
Areastring.append ("");
if (! Page.IsPostBack)
{
Response.Write (Areaidvalid (Areaid.tostring ()));
SoLe.BLL.AreaTable BLL = new SoLe.BLL.AreaTable ();
DataSet ds = new DataSet ();
ds = BLL. GetList ("paterid=" + areaid.tostring () + "");
if (!object. Equals (ds, NULL) && ds. Tables[0]. Rows.Count > 0) {
for (int i = 0; I < ds. Tables[0]. Rows.Count; i++) {
if (string. IsNullOrEmpty (Areastring.tostring ()))
{
Areastring.append (ds. Tables[0]. rows[i]["Title"]. ToString () + "," + ds. Tables[0]. rows[i]["Id"]. ToString ());
}
else {
Areastring.append ("|" + DS). Tables[0]. rows[i]["Title"]. ToString () + "," + ds. Tables[0]. rows[i]["Id"]. ToString ());
}
}
}
}
Response.Write (Areastring.tostring ());
}
JavaScript split string loaded to DropDownList
Suppose variable str holds several sets of corresponding data, DropDownList named Ddltype, and the character-delimited data is loaded into the Ddltype, as follows:
Program code
Copy Code code as follows:
<script language= "JavaScript" >
function Loadtype () {
var str = "1| Web page |2| picture |3| Enterprise |4| Information |";
var temp = str.split ("|");
var count = (temp.length-1)/2;
for (var i = 0; I <= count; i++) {
document.all ("Ddltype"). Options.add (New Option (temp[i), Temp[i + 1));
}
Return
}
<script>
