您现在的位置:计算机技术学习网 > 技术中心 > WEB编程 > JSP >

js操作select

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 12:17 点击:

1.select默认是inline元素,你可以
 
select
{
    display:block;
}
2.默认select会选择第一项option,如果初始状态不选可以:
jq写法:
$("select").each(function(){this.selectedIndex=-1});
或者干脆加个冗余option:
 
<select>
    <option>请选择网站...</option>
    <option value="http://www.qq.com">腾讯网</option>
    <option value="http://www.163.com">网易</option>
    <option value="http://www.google.com">谷歌</option>
</select>
注:
 
The selectedIndex property returns -1 if a select object does not contain any selected items. Setting the selectedIndex property clears any existing selected items.
 
The selectedIndex property is most useful when used with select objects that support selecting only one item at a time—that is, those in which the MULTIPLE attribute is not specified. 
3.获取选择项的值:
 
<select id="ddlCities" onchange="alert(this.options[this.selectedIndex].value);">
    <option value="0">北京</option>
    <option value="1">济南</option>
    <option value="2">威海</option>
</select>
获取文本:
 
this.options[this.selectedIndex].text
更简洁的直接selectObj.value
 
4.多选
 
<select id="ddlCities" multiple="multiple" size="2">
    <option value="0">北京</option>
    <option value="1">济南</option>
    <option value="2">威海</option>
</select>
 使用jq获取选择,仅测试所以写在标签上:
 
<select id="ddlCities" multiple="multiple" size="2" onchange="alert($(this).find('option:selected').text());">
    <option value="0">北京</option>
    <option value="1">济南</option>
    <option value="2">威海</option>
</select>
如果纯js写,需要循环了:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
select
{
    display:block;
}
</style>
<script type="text/javascript">
function ddlCities_onchange(theSel)
{
    var arr=[];
    for(var i=0;i<theSel.options.length;i++)
    {
        if(theSel.options[i].selected)
            arr.push(theSel.options[i].innerText);  
    }
    alert(arr.join());
}
</script>
</head>
 
<body>
<select>
    <option>请选择网站...</option>
    <option value="http://www.qq.com">腾讯网</option>
    <option value="http://www.163.com">网易</option>
    <option value="

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • JSP与Servlet
    • 自己动手写MiniBBS系列(基本篇)之用户登录
    • JSP取当前日期
    • JDBC 入门(一)
    • 打开一个jsp页面默认查询所有数据,调用action
    • 使用JSP标签库验证用户的输入(2)完
    • 自定义JSP标签(tag)浅议
    • WIN98/2000下的jsp服务器
    • JSP内建对象(二)
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1