DropDownList 컨트롤의 자바스크립트 조작에 대한 구체적인 사용 예에 ​​대한 자세한 설명

Javascript를 사용하여 DropDownList 컨트롤을 조작하려면 먼저 select(또는 DropDownList)의 가장 기본적인 두 가지 속성을 이해해야 합니다. 하나는 값 속성이고, 하나는 텍스트 속성이고, 다음과 같은 작업에 사용되는 selectedIndex 속성이 있습니다. 현재 선택된 항목(번호)을 확인하세요. 자세한 내용은 위의 샘플 코드를 참조하세요.

본론으로 돌아가서 주로 다음 사항을 소개합니다.
(1) DropDownList 컨트롤에서 값을 지웁니다. ​

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) 
　　　　{ 
　　　　　　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 컨트롤이 있습니다. 이것은 js에서 사용할 수 있습니다. 다음 스크립트는 Name

var myvalue=document.all('Name').value;

2의 값을 가져옵니다. 서버 제어는 js에서 변수의 값을 어떻게 가져오는가? 제가 일반적으로 사용하는 방법은 아직 찾지 못했습니다. 인터페이스에 숨겨진 컨트롤 HtmlInputHidden을 넣은 다음 서버 컨트롤이 실행되도록 설정하여 js 스크립트 및 ASP.NET 코드에서 컨트롤 값에 액세스할 수 있습니다.
js의 서버 컨트롤에 값을 할당합니다.

var bt＝document.all('Name').value; 
bt.value='名称';

액세스하려면 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('List1'); 
var my_value='我得选择'; 
for(var index=0;index<handle.options.length;index++) 
{ 
if(handle.options[index].text==my_value) 
{ 
handle.selectedIndex=index; 
} 
}

JS ListBox를 선택 취소하고 선택합니다. , DropDownList options

드롭다운 목록의 어떤 항목이 자바스크립트에서 현재 선택된 항목인지 설정합니다.

방법 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); 
} 
}

D 동적 변경 방법( 도시 코드를 기반으로 하고 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(','); 
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 컨트롤의 자바스크립트 조작에 대한 구체적인 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!