ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript と DropDownList_javascript スキルの差異分析

JavaScript と DropDownList_javascript スキルの差異分析

WBOYオリジナル: 2016-05-16 18:37:23890ブラウズ

たとえば、コントロールはアンカーコントロールにレンダリングされます。これは、以下で説明する DropDownList コントロールにも当てはまります。 asp.net ページ。Web サーバーコントロール DropDownList と通常の選択コントロール (主に比較用)。
コード

コードをコピーコードは次のとおりです:

長沙
北京< ; /asp:ListItem>
天津
Mohe

ブラウザーでページを表示し、クリックしてソースファイルを表示します。asp.net ページが次の形式にレンダリングされていることがわかります。
コード

コードをコピーコードは次のとおりです:

" id ="ddlNames">

<オプションvalue= "2">リリー

document.getElementById('ddlCities').options.length = 0;
(2) DropDownList に値 'Param1' を持つ ListItem があるかどうかを判断します。

コードをコピー

コードは次のとおりです。 function isListItemExist(objDdl, objItemValue) {

var isExist = false;

for(var i in objSelect.options) 
 { 
 if (i.value == objItemValue) 
 } 
 } 
 return isExist; 

 
JavaScript と DropDownList 
サーバー コントロール DropDownList と Javascript 間の転送 

 


コードをコピー

コードは次のとおりです:

取消绑定

ドロップダウンリストで選択した値
c#:

コードをコピーコードは次のとおりです:

 
ddlProvince .SelectedIndex = ddlProvince.Items.IndexOf(ddlProvince.Items.FindByText( "浙江")); 
javascript: 
var requiredSdept=$("select[@id='ddlSdept'] オプション[@ selected]" ).val(); 
var requiredSdept = $("#ddlSdept option[@selected]").text(); 
var select1 = document.all.var select1value = select1.options[select1.selectedIndex].value; 
var select1Text = select1.options[select1.selectedIndex].innerText; 
ここで、select1Text は選択された値です。モーダル ウィンドウで使用する場合は、次のコードを使用できます: 
window.returnValue=select1Text; //これは親フォームに返される値です 

 

ドロップダウンリストのどの項目が現在選択されている項目であるかを JavaScript で設定します
方法 1:
i = 2
document.all.dropdownlistID.options[i].selected=true
方法 2:
obj.selectedIndex = 2;
方法 3:
obj.value="設定する値。"//ドロップダウンリストはその値を現在の値に自動的に設定します。
JavaScript はドロップダウンリスト項目をクリアします

コードをコピーしますコードは次のとおりです:

//オリジナルをクリアする 項目があります 
function clearitem(){ 
var drp1 = document.getElementById("drp1"); 
while(drp1.options.length>0); 
{ 
drp1 .options.remove (0); 
} 
} 

 

動的変更メソッド (都市コードに基づいて都市の商業地区を取得し、DropDownList に追加します)

コードをコピーしますコードは次のとおりです:

function getyq() 
{ 
var city = document.getElementById("DropDownList_Cities"); //都市コードを取得します 
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{ 
var newOption = document.createElement("OPTION"); //新しい項目を定義します。 🎜>var ff = opt[j].split( '|'); 
 newOption.text = ff[1]; 
 newOption.value = ff[1]; newOption); 
 } 
} 
} 
htp.send() 
} 

 
JavaScript は更新なしで DropDownList(Select) の 3 レベルのリンクを実装します

コードをコピーします

コードは次のとおりです:

 
HTML コード 

コードをコピー

コードは次のとおりです:

国を選択してください DropDownList> 州 ;都市を選択してください

Aspx.cs コード

コピーcode

コードは次のとおりです:

 
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分割字符串装载到DropDownList
假设变量str存放着几组对应的数据，DropDownList名为ddlType，把字符分隔后的数据装载到ddlType，具体代码如下：
程序代码

复制代码代码如下: