zoukankan      html  css  js  c++  java
  • JavaScript与DropDownList 区别分析

    大家都知道,.NET中一些Web服务器控件解析并编译,最终被渲染的时候,其实是转化成了普通的html控件。

    比如<asp:LinkButton>控件就被渲染成了<a>锚点控件,这里要讲的DropDownList控件也一样,被渲染成了普通的select控件,在如下的asp.net页面中定义了一个web服务器控件DropDownList和一个普通的select控件(主要为了对比)。 

    代码如下:

    <asp:DropDownList ID = "ddlCities" runat = "server"> 
    <asp:ListItem Value = "0">长沙</asp:ListItem> 
    <asp:ListItem Value = "1">北京</asp:ListItem> 
    <asp:ListItem Value = "2">天津</asp:ListItem> 
    <asp:ListItem Value = "3">漠河</asp:ListItem> 
    </asp:DropDownList> 
    <select id = "ddlNames" runat ="server"> 
    <option value = "0">James</option> 
    <option value = "1">Green</option> 
    <option value = "2">Lily</option> 
    <option value = "3">Lucy</option> 
    </select> 
    在浏览器中查看该页面,并点击查看源文件,不难看出,asp.net页面被渲染成了如下格式: 
    代码

    <select name="ddlCities" id="ddlCitys"> 
    <option value="0">长沙</option> 
    <option value="1">北京</option> 
    <option value="2">天津</option> 
    <option value="3">漠河</option> 
    </select> 
    <select name="ddlNames" id="ddlNames"> 
    <option value="0">James</option> 
    <option value="1">Green</option> 
    <option value="2">Lily</option> 
    <option value="3">Lucy</option> 
    </select> 

    好了,接下来介绍一下要用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('txtSdept').value =document.all('ddlSdept').options[document.all('ddlSdept').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> 

    参考文章:


    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title>无标题文档</title> 
    <script language="javascript"> 
    function moveSelected(select, down) 

    if (select.selectedIndex != -1) 

    if (down) 

    if (select.selectedIndex != select.options.length - 1) 
    var i = select.selectedIndex + 1; 
    else 
    return; 

    else 

    if (select.selectedIndex != 0) 
    var i = select.selectedIndex - 1; 
    else 
    return; 

    var swapOption = new Object(); 
    swapOption.text = select.options[select.selectedIndex].text; 
    swapOption.value = select.options[select.selectedIndex].value; 
    swapOption.selected = select.options[select.selectedIndex].selected; 
    swapOption.defaultSelected = select.options[select.selectedIndex].defaultSelected; 
    for (var property in swapOption) 
    select.options[select.selectedIndex][property] = select.options[property]; 
    for (var property in swapOption) 
    select.options[property] = swapOption[property]; 


    <form id="formName" name="formName" > 
    <select name="selectName" id="selectName" size="8"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    </select> 
    <input id="moveUp" onclick="moveSelected(this.form.selectName, false)" type="button" value="上移" /> 
    <input id="moveDown" onclick="moveSelected(this.form.selectName, false)" type="button" value="下移" /> 
    </form> 


    1、js脚本如何访问服务器控件的值 
    界面上有一个TextBox控件,ID为Name,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=='text' || inputList.type=='password')) 

    inputList.value=""; 

    4、让dropdownlist选择到指定项 
    选择dropdownlist中值为“我得选择”得项 


    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,Select,DropDownList选项的选中 


    <asp:ListBox ID="ListBox1" runat="server"> 
    <asp:ListItem Text="1" Value="1"></asp:ListItem> 
    <asp:ListItem Text="2" Value="2"></asp:ListItem> 
    <asp:ListItem Text="3" Value="3"></asp:ListItem> 
    <asp:ListItem Text="4" Value="4"></asp:ListItem> 
    <asp:ListItem Text="5" Value="5"></asp:ListItem> 
    </asp:ListBox> 
    <script language="javascript" type="text/javascript"> 
    $(document).ready(function(){ 
    $("#cel").click(function(){ 
    $("#<%=ListBox1.ClientID%>").get(0).selectedIndex=-1; 
    }); 
    }); 
    </script> 
    <div id="cel" style="cursor:pointer;">取消绑定</div> 

    dropdownlist 选中值 
    c#: 


    ddlProvince.SelectedIndex = ddlProvince.Items.IndexOf(ddlProvince.Items.FindByText( "浙江"));
    javascript: 
    var requiredSdept=$("select[@id='ddlSdept'] option[@selected]").val(); 
    var requiredSdept = $("#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(); 


    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(','); 
    var s = opt.length 
    for(var j = 0;j<s;j++) 

    var newOption = document.createElement("OPTION");   //定义一个新的项 
    var ff = opt[j].split('|'); 
       newOption.text = ff[1]; 
       newOption.value = ff[1]; 
       drp1.options.add(newOption); 
      } 


    htp.send() 

    JavaScript实现DropDownList(Select)三级联动无刷新 

    <script language=javascript> 
    function CountryChange(){ 
    countryid=document.getElementById("ddlContry").value; 
    if(countryid==null||countryid==""){ 
    alert("请选择所属国家"); 
    CountryDel("ddlProvince");//清空DropDownList 
    CountryDel("ddlCity");//清空DropDownList 
    return false; 

    var countrystring=""; 
    var posturl=location.protocol+"//"+location.hostname+"//soleweb//AjaxEnjine//AreaShow.aspx?AreaId="+countryid; 
    countrystring=openUrl(posturl); 
    if(countrystring=="-2"){//查询失败 
    alert("数据查询失败"); 
    return false; 

    //分割并写入DropDownList 
    CountryDel("ddlProvince");//清空DropDownList 
    CountryDel("ddlCity");//清空DropDownList 
    if(countrystring==""){ 
    return false; 

    var stringarray=countrystring.split("|"); 
    for(var i=0;i<stringarray.length;i++){//重写DropDownList 
    //拆分内部数组 
    var optionarray=stringarray[i].split(","); 
    var newoption=document.createElement("option"); 
    newoption.text=optionarray[0]; 
    newoption.value=optionarray[1]; 
    document.getElementById("ddlProvince").options.add(newoption);   


    function CountryDel(AreaName){//清空DropDownList 
    var countnum=document.getElementById(AreaName).options.length; 
    for(var i=1;i<countnum;i++){//清空DropDownList 
    document.getElementById(AreaName).remove(countnum-i); 


    function ProvinceChange(){ 
    countryid=document.getElementById("ddlProvince").value; 
    if(countryid==null||countryid==""){ 
    alert("请选择所属省"); 
    CountryDel("ddlCity");//清空DropDownList 
    return false; 

    var countrystring=""; 
    var posturl=location.protocol+"//"+location.hostname+"//soleweb//AjaxEnjine//AreaShow.aspx?AreaId="+countryid; 
    countrystring=openUrl(posturl); 
    if(countrystring=="-2"){//查询失败 
    alert("数据查询失败"); 
    return false; 

    //分割并写入DropDownList 
    CountryDel("ddlCity");//清空DropDownList 
    if(countrystring==""){ 
    return false; 

    var stringarray=countrystring.split("|"); 
    for(var i=0;i<stringarray.length;i++){//重写DropDownList 
    //拆分内部数组 
    var optionarray=stringarray[i].split(","); 
    var newoption=document.createElement("option"); 
    newoption.text=optionarray[0]; 
    newoption.value=optionarray[1]; 
    document.getElementById("ddlCity").options.add(newoption);   


    function openUrl(url) 

    var objxml=new ActiveXObject("Microsoft.XMLHttp") 
    objxml.open("GET",url,false); 
    objxml.send(); 
    retInfo=objxml.responseText; 
    if (objxml.status=="200") 

    return retInfo; 

    else 
      { 
    return "-2"; 


    </script> 

    Html代码 


    <asp:DropDownList ID="ddlContry" runat="server" onchange="CountryChange()" OnSelectedIndexChanged="ddlContry_SelectedIndexChanged"> 
    <asp:ListItem Value=" ">请选择所属国家</asp:ListItem> 
    </asp:DropDownList> 
    <asp:DropDownList ID="ddlProvince" runat="server" onchange="ProvinceChange()" OnSelectedIndexChanged="ddlProvince_SelectedIndexChanged"> 
    <asp:ListItem Value=" ">请选择所属省</asp:ListItem> 
    </asp:DropDownList> 
    <asp:DropDownList ID="ddlCity" runat="server"> 
    <asp:ListItem Value=" ">请选择所属市</asp:ListItem> 
    </asp:DropDownList> 

    Aspx.cs代码 

    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,具体代码如下: 
    程序代码 


    <script language="javascript"> 
    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])); 

    return; 

    <script> 

  • 相关阅读:
    yii2 gii 命令行自动生成控制器和模型
    控制器中的方法命名规范
    Vue Property or method "" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based
    IDEA插件:GsonFormat
    Spring Boot : Access denied for user ''@'localhost' (using password: NO)
    Typora添加主题
    Git基础命令图解
    Java Joda-Time 处理时间工具类(JDK1.7以上)
    Java日期工具类(基于JDK1.7版本)
    Oracle SQL Developer 连接Oracle出现【 状态: 失败 -测试失败: ORA-01017: invalid username/password; logon denied】
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/1679043.html
Copyright © 2011-2022 走看看