html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

JS简单操作select和dropdownlist实例_javascript技巧_

[ ] 已经帮助:人解决问题

本文实例讲述了JS简单操作select和dropdownlist的方法。分享给大家供大家参考。具体实现方法如下:iAAHTML5中文学习网 - HTML5先行者学习网

一、js选中服务器控件select与dropdownlistiAAHTML5中文学习网 - HTML5先行者学习网

1. js操作服务器控件selectiAAHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
<select id="selectID" onchange="return showMessage()">iAAHTML5中文学习网 - HTML5先行者学习网
     <option value="0">==请选择==</option>iAAHTML5中文学习网 - HTML5先行者学习网
     <option value="1">是</option>iAAHTML5中文学习网 - HTML5先行者学习网
     <option value="2">否</option>iAAHTML5中文学习网 - HTML5先行者学习网
</select>iAAHTML5中文学习网 - HTML5先行者学习网

iAAHTML5中文学习网 - HTML5先行者学习网
<script type="text/javascript" language="javascript">iAAHTML5中文学习网 - HTML5先行者学习网
  function showMessage() {iAAHTML5中文学习网 - HTML5先行者学习网
      if (document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value == 1) {iAAHTML5中文学习网 - HTML5先行者学习网
   alert("你好,你选择了第 1 个");iAAHTML5中文学习网 - HTML5先行者学习网
   document.getElementById("txtContractName").setAttribute("enable",false);iAAHTML5中文学习网 - HTML5先行者学习网
      }iAAHTML5中文学习网 - HTML5先行者学习网
      else if (document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value == 2) {iAAHTML5中文学习网 - HTML5先行者学习网
   alert("你好,你选择了第 2 个");iAAHTML5中文学习网 - HTML5先行者学习网
      }iAAHTML5中文学习网 - HTML5先行者学习网
  }iAAHTML5中文学习网 - HTML5先行者学习网
</script>iAAHTML5中文学习网 - HTML5先行者学习网

//js操作服务器控件dropdownlistiAAHTML5中文学习网 - HTML5先行者学习网
<asp:DropDownList ID="ddlFolder" runat="server" SkinID="ddlSkin" AutoPostBack="false" OnSelectedIndexChanged="ddlFolder_SelectedIndexChanged">    iAAHTML5中文学习网 - HTML5先行者学习网
        <asp:ListItem Value="0">选项0</asp:ListItem>   iAAHTML5中文学习网 - HTML5先行者学习网
   <asp:ListItem Value="1">选项1</asp:ListItem>  iAAHTML5中文学习网 - HTML5先行者学习网
</asp:DropDownList>    iAAHTML5中文学习网 - HTML5先行者学习网
<asp:DropDownList ID="ddlFolder" runat="server" SkinID="ddlSkin" AutoPostBack="false" OnSelectedIndexChanged="ddlFolder_SelectedIndexChanged"> iAAHTML5中文学习网 - HTML5先行者学习网
  <asp:ListItem Value="0">选项0</asp:ListItem>iAAHTML5中文学习网 - HTML5先行者学习网
  <asp:ListItem Value="1">选项1</asp:ListItem> iAAHTML5中文学习网 - HTML5先行者学习网
</asp:DropDownList>

iAAHTML5中文学习网 - HTML5先行者学习网
JS代码:iAAHTML5中文学习网 - HTML5先行者学习网
复制代码 代码如下:
document.getElementById("ddlFolder").value="0";//0为你要选中的项的value
iAAHTML5中文学习网 - HTML5先行者学习网

2. 根据Text值设置选中某项iAAHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
var DropDownListCurrencyNew =  document.getElementById("ddlFolder");iAAHTML5中文学习网 - HTML5先行者学习网
for(i = 0; i < DropDownListCurrencyNew.options.length; i++)iAAHTML5中文学习网 - HTML5先行者学习网
{iAAHTML5中文学习网 - HTML5先行者学习网
          if(DropDownListCurrencyNew.options[i].text == "选项0")    iAAHTML5中文学习网 - HTML5先行者学习网
           {iAAHTML5中文学习网 - HTML5先行者学习网
               DropDownListCurrencyNew.options[i].selected = true; iAAHTML5中文学习网 - HTML5先行者学习网
          }iAAHTML5中文学习网 - HTML5先行者学习网
}
iAAHTML5中文学习网 - HTML5先行者学习网

二、js读取DropDownList选中项的value和textiAAHTML5中文学习网 - HTML5先行者学习网

Value:iAAHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
var selValue = document.getElementById("DropDownList1").options[document.getElementById("DropDownList1").selectedIndex].value;
iAAHTML5中文学习网 - HTML5先行者学习网

Text:iAAHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
var selText = document.getElementById("DropDownList1").options[document.getElementById("DropDownList1").selectedIndex].text;
iAAHTML5中文学习网 - HTML5先行者学习网

希望本文所述对大家的js与.net程序设计有所帮助。iAAHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助