DropDownListコントロールのJavaScript操作の具体的な使用例を詳しく解説-jsチュートリアル-php.cn

DropDownListコントロールのJavaScript操作の具体的な使用例を詳しく解説

伊谢尔伦

リリース： 2017-07-24 10:46:08

オリジナル

2855 人が閲覧しました

JavaScript を使用して DropDownList コントロールを操作するには、まず select (または DropDownList) の 2 つの最も基本的な属性を理解する必要があります。1 つは value 属性、もう 1 つは text 属性、そして、selectedIndex 属性です。現在選択されている項目 (番号) を識別します。詳細については、上記のサンプルコードを参照してください。

主に以下の点を紹介しながら、本題に入ります。
(1) DropDownList コントロールの値をクリアします。

document.getElementById(&#39;ddlCities&#39;).options.length = 0;

ログイン後にコピー

(2) DropDownListに値「Param1」を持つListItemがあるかどうかを判断します。

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

ログイン後にコピー

JavaScript と DropDownList

サーバーコントロール DropDownList と 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. JS スクリプトはどのようにしてサーバーコントロールの値にアクセスしますか?

ID 名を持つインターフェイス上に TextBox コントロールがあります。次のスクリプトは、Name

var myvalue=document.all(&#39;Name&#39;).value;

ログイン後にコピー

2の値を取得します。サーバーコントロールはjsの変数の値をどのように取得しますか？私が通常使用する方法は、まだ見つかりません。インターフェイス上に隠しコントロール HtmlInputHidden を追加し、それをに設定します。サーバーコントロールが実行され、コントロールの値に js スクリプトおよび ASP.NET コードでアクセスできるようになります。
js でサーバーコントロールに値を割り当てます。

var bt＝document.all(&#39;Name&#39;).value; 
bt.value=&#39;名称&#39;;

ログイン後にコピー

ASP.NET の Name.Value を使用してアクセスします。

3. インターフェイス上のすべての TextBox 要素をトラバースする方法

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. ドロップダウンリストで指定した項目を選択します

ドロップダウンリストの値が「選択する必要があります」である項目を選択します

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

ログイン後にコピー

JS の ListBox のチェックを外して、選択します, DropDownList オプション

JavaScript でドロップダウンリスト内のどの項目が現在選択されているかを設定します

方法 1:

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

ログイン後にコピー

方法 2:

obj.selectedIndex = 2;

ログイン後にコピー

方法 3:

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

ログイン後にコピー

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

ログイン後にコピー

動的変更メソッド(を入手してください都市コードに基づいて都市のビジネス地区をドロップダウンリストに追加)

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(&#39;,&#39;); 
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() 
}

ログイン後にコピー

以上がDropDownListコントロールのJavaScript操作の具体的な使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。