>  기사  >  웹 프론트엔드  >  JavaScript와 DropDownList_javascript 기술의 차이점 분석

JavaScript와 DropDownList_javascript 기술의 차이점 분석

WBOY
WBOY원래의
2016-05-16 18:37:23841검색

예를 들어, 컨트롤은 여기서 설명할 DropDownList 컨트롤에 대해서도 마찬가지입니다. 하나는 다음과 같습니다. asp.net 페이지. 웹 서버 컨트롤 DropDownList 및 일반 선택 컨트롤(주로 비교용)
코드

코드 복사 코드는 다음과 같습니다.


창사
베이징< ; /asp:ListItem>
천진
모헤



브라우저에서 페이지를 보고 클릭하면 소스 파일을 볼 수 있습니다. asp.net 페이지가 다음 형식으로 렌더링되는 것을 보는 것은 어렵지 않습니다.
코드

코드 복사 코드는 다음과 같습니다.
<이름 선택= "ddlCities" id=" ddlCitys">

;옵션 값= "2">천진




다음 JavaScript를 사용하여 DropDownList 컨트롤을 조작하는 방법을 소개하려면 먼저 select(또는 DropDownList)의 가장 기본적인 두 가지 속성을 이해해야 합니다. 하나는 값 속성이고, 다른 하나는 텍스트 속성이며, 이 속성은 다음과 같습니다. 현재 선택된 항목(번호 )을 확인하세요. 자세한 내용은 위의 샘플 코드를 참조하세요.
본격적으로 다음 사항을 소개하면서 시작해 보겠습니다.
(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)
  }
 }
  return isExist;


JavaScript 및 DropDownList
서버 제어 DropDownList와 Javascript 간 전송



코드 복사


코드는 다음과 같습니다.

取消绑定


dropdownlist selected value
c#:
코드 복사 코드는 다음과 같습니다.

ddlProvince .SelectedIndex = ddlProvince.Items.IndexOf(ddlProvince.Items.FindByText( "절강"));
javascript:
var requireSdept=$("select[@id='ddlSdept'] option[@ selected]" ).val();
var requireSdept = $("#ddlSdept option[@selected]").text();
var select1 = document.all.<%= ddlSdept.ClientID % >;
var select1value = select1.options[select1.selectedIndex].value;
var select1Text = select1.options[select1.selectedIndex].innerText;
여기서 select1Text는 선택된 값입니다. 모달 창에서 사용하는 경우 다음 코드를 사용할 수 있습니다.
window.returnValue=select1Text; //상위 폼에 반환되는 값입니다.
window.close();

dropdownlist의 어떤 항목이 JavaScript에서 현재 선택된 항목인지 설정
방법 1:
i = 2
document.all.dropdownlistID.options[i].selected=true
방법 2:
obj.selectedIndex = 2;
방법 3:
obj.value="설정하려는 값."//Dropdownlist는 자동으로 해당 값을 현재 값으로 설정합니다.
Javascript는 드롭다운 목록 항목을 지웁니다
코드 복사 코드는 다음과 같습니다.

// 원본 지우기 항목이 있습니다
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(','); 🎜>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 코드



복사 코드

코드는 다음과 같습니다.

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])) ;
}
반환;
}
<스크립트>

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.