Difference between JavaScript and DropDownList

For example, the <asp: LinkButton> control is rendered as the <a> anchor control, and the DropDownList control to be discussed here is also rendered as a normal select control, the following asp.net page defines a web server control DropDownList and a common select control (mainly for comparison ).
Code
Copy codeThe Code is 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>

View the page in the browser and click View Source file. It is not difficult to see that the asp.net page is rendered in the following format:
Code
Copy codeThe Code is 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>

Now, we will introduce how to use javascript to manipulate the DropDownList control. First, we need to understand the two most basic attributes of select (or DropDownList). One is the value attribute and the other is the text attribute, there is also a selectedIndex attribute that identifies the currently selected item (number). For details, see the sample code above.
The following is a brief introduction to the following:
(1) Clear the value in the DropDownList control.
　　
Document. getElementById ('ddlcities '). options. length = 0;
(2) determine whether there is a ListItem with the value 'param1' in the DropDownList.
Copy codeThe Code is 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 the Server Control DropDownList and Javascript
Copy codeThe Code is 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: Export PX" onchange = "hehe () "runat =" server ">
<Asp: ListItem Value = "1"> Computer System </asp: ListItem>
<Asp: ListItem Value = "2"> mechanical system </asp: ListItem>
<Asp: ListItem Value = "3"> electronics </asp: ListItem>
<Asp: ListItem Value = "4"> English </asp: ListItem>
<Asp: ListItem Value = "5"> Chinese </asp: ListItem>
</Asp: DropDownList>
<Asp: TextBox id = "txtSdept" style = "Z-INDEX: 102; LEFT: 48px; POSITION: absolute; TOP: paipx" runat = "server"> </asp: TextBox>

References:
Copy codeThe Code is 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. How to access the server control value using js scripts
There is a TextBox Control on the interface, whose ID is Name. The following script can be used in js to obtain the Name value.
Var myvalue = document. all ('name'). value;
2. How does the Server Control obtain the value of a variable in js?
Currently, no good method has been found. I usually use the following method: Put a hidden control HtmlInputHidden on the interface and set it to run as a server control, so as to match ASP in js scripts. NET code can access the value of this control
Assign a value to the server control in js:
Var bt = document. all ('name'). value;
Bt. value = 'name ';
Use Name. Value to access ASP. NET.
3. How to traverse all TextBox elements on the Interface
Copy codeThe Code is 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. Set dropdownlist to a specified item.
Select "I have to select" in the value of dropdownlist.
Copy codeThe Code is as follows:
Var handl = document. all ('list1 ');
Var my_value = 'I have to select ';
For (var index = 0; index {
If (handle. options [index]. text = my_value)
{
Handle. selectedIndex = index;
}
}

JS cancels the selection of ListBox, Select, and DropDownList options
Copy codeThe Code is 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 codeThe Code is 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;
Select1Text indicates the selected value. If you use the following code in the modal window:
Window. returnValue = select1Text; // This is the value returned to the parent form
Window. close ();

Which of the following items is set to dropdownlist in javascript?
Method 1:
I = 2
Document. all. dropdownlistID. options [I]. selected = true
Method 2:
Obj. selectedIndex = 2;
Method 3:
Obj. value = "the value you want to set. "// Dropdownlist will automatically set that value to the current value.
Javascript clears dropdownlist items
Copy codeThe Code is as follows:
// Clear the original items
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 DropDownList)
Copy codeThe Code is 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 drop-down list
Var str = htp. responseText;
Var opt = str. split (',');
Var s = opt. length
For (var j = 0; j <s; j ++)
{
Var newOption = document. createElement ("OPTION"); // 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 of DropDownList (Select) three-level linkage without refreshing
Copy codeThe Code is as follows:
<Script language = javascript>
Function CountryChange (){
Countryid = document. getElementById ("ddlContry"). value;
If (countryid = null | countryid = ""){
Alert ("select a country ");
CountryDel ("ddlProvince"); // clear the DropDownList
CountryDel ("ddlCity"); // clear the 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 to DropDownList
CountryDel ("ddlProvince"); // clear the DropDownList
CountryDel ("ddlCity"); // clear the DropDownList
If (countrystring = ""){
Return false;
}
Var stringarray = countrystring. split ("| ");
For (var I = 0; I <stringarray. length; I ++) {// rewrite DropDownList
// Split the 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) {// clear the DropDownList
Var countnum = document. getElementById (AreaName). options. length;
For (var I = 1; I <countnum; I ++) {// clear the DropDownList
Document. getElementById (AreaName). remove (countnum-I );
}
}
Function ProvinceChange (){
Countryid = document. getElementById ("ddlProvince"). value;
If (countryid = null | countryid = ""){
Alert ("select the province ");
CountryDel ("ddlCity"); // clear the 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 to DropDownList
CountryDel ("ddlCity"); // clear the DropDownList
If (countrystring = ""){
Return false;
}
Var stringarray = countrystring. split ("| ");
For (var I = 0; I <stringarray. length; I ++) {// rewrite DropDownList
// Split the 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)
{
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 codeThe Code is as follows:
<Asp: DropDownList ID = "ddlContry" runat = "server" onchange = "CountryChange ()" OnSelectedIndexChanged = "ddlContry_SelectedIndexChanged">
<Asp: ListItem Value = ""> select a country </asp: ListItem>
</Asp: DropDownList>
<Asp: DropDownList ID = "ddlProvince" runat = "server" onchange = "ProvinceChange ()" OnSelectedIndexChanged = "ddlProvince_SelectedIndexChanged">
<Asp: ListItem Value = ""> select a province </asp: ListItem>
</Asp: DropDownList>
<Asp: DropDownList ID = "ddlCity" runat = "server">
<Asp: ListItem Value = ""> select a city </asp: ListItem>
</Asp: DropDownList>

Aspx. cs code
Copy codeThe Code is 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 ());
}

Load JavaScript split strings to DropDownList
Assume that the variable str stores several groups of corresponding data. The DropDownList name is ddlType, and the data separated by characters is loaded to ddlType. The Code is as follows:
Program code
Copy codeThe Code is as follows:
<Script language = "javascript">
Function LoadType (){
Var str = "1 | webpage | 2 | image | 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>