Difference analysis between JavaScript and DropDownList_javascript skills

For example, the control is rendered into an anchor control. The same is true for the DropDownList control to be discussed here. It is rendered into an ordinary select control. One is defined in the following asp.net page. The web server control DropDownList and an ordinary select control (mainly for comparison).
Code

Copy code The code is as follows:

Changsha
Beijing< /asp:ListItem>
Tianjin
Mohe

James
Green
Lily
Lucy

View the page in the browser and click to view the source file. It is not difficult to see that the asp.net page is rendered into the following format:
Code

Copy code The code is as follows:

Changsha
Beijing
Tianjin
Mohe


James
Green
Lily
Lucy

Okay, next To introduce how 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, which is used to identify the currently selected 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.

Copy code The code is as follows:

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


JavaScript and DropDownList

Transfer between server control DropDownList and Javascript

Copy code The code is as follows:

取消绑定

dropdownlist selected value
c#:

Copy code The 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;
where select1Text is the selected value. If used in a modal window, you can use the following code:
window.returnValue=select1Text; //This is the value returned to the parent form
window.close();

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="The value you want to set."//Dropdownlist will automatically set that value to the current value.
Javascript clears dropdownlist items

Copy code The code is as follows:

//Clear the original There are items
function clearitem(){
var drp1 = document.getElementById("drp1");
while(drp1.options.length>0)
{
drp1.options.remove (0);
}
}

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

Copy code The 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 items
var str = htp.responseText;
var opt = str.split(',');
var s = opt.length
for( var j = 0;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 implements DropDownList(Select) three-level linkage without refresh

Copy the code The code is as follows:

Html code

Copy code The code is as follows:

Please select the country


Please select Province


Please select the city

Aspx.cs code

Copy code The code is as follows:

protected void Page_Load(객체 전송자, 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 분할자 유형, 把字符分隔后的数据装载到ddlType，具体代码如下：
程序代码

复主代码 代码如下:

<스크립트 언어 ="자바스크립트">
function LoadType() {
var str = "1|网页|2|사진|3|企业|4|资讯|";
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])) ;
}
반환;
}
<스크립트>