首頁  >  文章  >  web前端  >  javascript操縱DropDownList控制項具體用法實例詳解

javascript操縱DropDownList控制項具體用法實例詳解

伊谢尔伦
伊谢尔伦原創
2017-07-24 10:46:082825瀏覽

用javascript操縱DropDownList控件,首先得了解select(或DropDownList)的兩個最基本的屬性,一個是value屬性,一個是text屬性,還有一個selectedIndex屬性,用來識別目前選取的項(數字),具體可參見上面的範例程式碼。 

以下正式言歸正傳,主要介紹以下幾點:
(1) 清空DropDownList控制項中的值。   

document.getElementById('ddlCities').options.length = 0;

(2) 判斷DropDownList中是否有value為'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腳本如何存取伺服器控制項的值 

#介面上有一個TextBox控制項,ID為Name,js裡可以採用以下腳本取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、讓dropdownlist選擇到指定項目
選擇dropdownlist中值為「我得選擇」得項 

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,Select,DropDownList選項的選取

javascript中設定dropdownlist哪一項為目前選取項目 

方法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); 
} 
}

動態變更方法(根據城市程式碼取得該市商業區並新增至DropDownList中) 

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() 
}

以上是javascript操縱DropDownList控制項具體用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn