图片 1

JS获取下拉列表所选中的TEXT和Value的实现代码

在下拉列表框(select)中,是永葆选项(option)分组的,利用的是
optgroup。

正如所示:

<!DOCTYPE html PUBLIC “-//W3C//DTD
XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>三级关联菜单(美术专业版卡塔尔国</title>
</head>
<body>
<select name=”sel1″ id=”sel1″   target=’sel2′ data=’sel3′
onchange=”t(this)” event=’true’>
<!– target 表示下级菜单突显的select的ID名称 –>
<!– data  表示下级菜单显示的数额select的ID名称–>
<!– event   表示是否还应该有下级菜单–>
<!–
原理 下级菜单的optgroup的label的文字和选用的文字对应,然后彰显出来–>
<!– 如若您要创立2级菜单 要求 三个select
三个是显得 还会有叁个是存放在展现的数额–>
<!– 本例中 展现三级菜单 须要 多个select 八个是显得
七个是数量–>
<!–
记得把前边的脚本放在网页中,注意:不要放在<head></head>中就能够–>
<!– 若是您有不知底地点 加作者QQ:628558或MSN:shqlsl@hotmail.com
时间:二零零六年四月15日早晨–>

看示例:

复制代码 代码如下:

   <option value=”浙江省”
selected=”selected”>浙江省</option>
   <option value=”福建省”>福建省</option>
</select>
<select name=”sel2″ id=”sel2″ target=’sel4′ data=’sel5′
event=’true’>
   <option value=”” selected=”selected”>请选择</option>
</select>
<select name=”sel3″ id=”sel3″>
<optgroup label=”浙江省”>
   <option value=”杭州” selected=”selected”>杭州</option>
   <option value=”温州”>温州</option>
   <option value=”台州”>台州</option>
   <option value=”宁波”>宁波</option>
   </optgroup>
<optgroup label=”福建省”>
   <option value=”福州”>福州</option>
   <option value=”泉州”>泉州</option>
   <option value=”漳州”>漳州</option>
   </optgroup>
</select>
<select name=”sel4″ id=”sel4″ target=’sel6′ data=’sel7′>
   <option value=”” selected=”selected”>请选择</option>
</select>
<select name=”sel5″ id=”sel5″>
<optgroup label=”杭州”>
   <option value=”下城区”
selected=”selected”>下城区</option>
   <option value=”上城区”>上城区</option>
   <option value=”江干区”>江干区</option>
   </optgroup>
   <optgroup label=”温州”>
   <option value=”鹿城区”>鹿城区</option>
   <option value=”龙湾区”>龙湾区</option>
   <option value=”泉州”>泉州</option>
   <option value=”漳州”>漳州</option>
   </optgroup>
<optgroup label=”福州”>
   <option value=”鼓楼区”>鼓楼区</option>
   <option value=”台江区”>台江区</option>
   <option value=”仓山区”>仓山区 </option>
   <option value=”晋安区”>马尾区</option>
   </optgroup>
<optgroup label=”泉州”>
   <option value=”晋江”>晋江</option>
   <option value=”石狮”>石狮</option>
   <option value=”永春”>永春</option>
   </optgroup>
</select>
<select name=”sel6″ id=”sel6″ >
   <option value=”” selected=”selected”>请选择</option>
</select>
<select name=”sel7″ id=”sel7″>
   <optgroup label=”下城区”>
   <option value=”球场路”
selected=”selected”>球馆路</option>
   <option value=”朝晖路”>朝晖路</option>
   <option value=”建国中路”>建国西路</option>
   </optgroup>
   <optgroup label=”上城区”>
   <option value=”吴山广场”>吴山广场</option>
   <option value=”平海路”>平海路</option>
   <option value=”清泰路”>清泰路</option>
   </optgroup>
   <optgroup label=”石狮”>
   <option value=”宝盖镇”>宝盖镇</option>
   <option value=”灵秀镇”>灵秀镇</option>
   <option value=”锦尚镇”>锦尚镇</option>
   </optgroup>
</select>
<script type=”text/javascript”>
    var shqlsl={};
    shqlsl.$=function(o){return
typeof(o)==”string”?document.getElementById(o):o;}
    shqlsl.isIE=document.all;
    if(!shqlsl.isIE)
   
HTMLElement.prototype.attachEvent=function(type,foo){this.addEventListener(type.slice(2),foo,false)}
    shqlsl.$opt=function(o,t){var
opts=o.getElementsByTagName(‘optgroup’);for(var
i=0;i<opts.length;i++){if(opts[i].label==t)return opts[i];}}
    shqlsl.hidsel=function(){var
sel=document.getElementsByTagName(‘select’);for(var
i=0;i<sel.length;i++){var
d=sel[i].getAttribute(‘data’);if(d!=null){shqlsl.$(d).style.display=’none’;}}};
    if(shqlsl.isIE)
    window.attachEvent(“onload”,shqlsl.hidsel);
    else
    window.addEventListener(“load”,shqlsl.hidsel,false);
   function t(ev)
   {
   var ev=ev||window.event.srcElement;
   var
ss=shqlsl.$(ev.getAttribute(‘target’));/*慎选之后会呈现给的目标*/   
   
   var s=shqlsl.$(ev.getAttribute(‘data’));/*暗藏的子菜单*/
   var stxt=ev.options[ev.selectedIndex].text;/*接受第几项*/
   if(ev.getAttribute(‘event’)==’true’)
  
ss.attachEvent(“onchange”,function(){if(shqlsl.isIE){t()}else{t(this)}})
   ss.innerHTML=””;
   try{
   var o=shqlsl.$opt(s,stxt).cloneNode(true);
   ss.appendChild(o);
   }catch(e){}
   }
    </script>
</body>
</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”” >
<head>
    <title>optgroup</title>
</head>
<body>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>无标题文书档案</title>
<script type=”text/javascript”>
function selChange(){
    var sel=document.getElementById(‘sel’);   
    alert(sel.options[sel.selectedIndex].text);
    alert(sel.options[sel.selectedIndex].value);
}
</script>
</head>
<body>
<select id=”sel” onchange=”selChange()” >
<option value=”zhangsan”>张三</option>
<option value=”lisi” >李四</option>
<option value=”wangwu” >王五</option>
</select>
</body>
</html>

<select name=”c” size=”10″
onchange=”javascript:document.getElementById(‘foo’State of Qatar.innerHTML=’选中项的
selectedIndex 是:’+this.selectedIndex;”>
  <optgroup label=”鱼类”>
    <option>鲫鱼</option>
    <option>鲤鱼</option>
  </optgroup>
  <optgroup label=”禽类”>
    <option>鸡</option>
    <option>鸭</option>
    <option>鹅</option>
  </optgroup>
  <option>未分类</option>
</select>

您大概感兴趣的篇章:

  • extJs
    文本框前面加上表达文字+下拉列表选中值后触发事件
  • javascript下拉列表菜单的落实形式
  • javascript下拉列表中显得树形菜单的兑现情势
  • JS完结帮衬多选的遍历下拉列表代码
  • javascript如何操作HTML下拉列表标签
  • JS+DIV+CSS实现仿表单下拉列表效果
  • JS+CSS完成下拉列表框美化效果(3款)
  • JS+CSS达成美化的下拉列表框效果
  • jQuery实今后下拉列表选择时获得json数据的方式
  • JS彰显下拉列表框内任何要素的办法
  • js达成下拉列表选中有些值的法门(3种方法卡塔尔

<div id=”foo”></div>

</body>
</html>

功效如下:

图片 1

  • XHTML 1.0 支持 optgroup。
  • optgroup 不支持嵌套。

optgroup onchange 的 bug,姑且称其为 bug。已经确信在 IE6.0 中留存该
bug,在 Fire福克斯 中空头支票,具体如下:

咱俩领略,除了采纳鼠标接纳选项外,还足以应用键盘上的方向键进行抉择,在
IE
中,当大家选中了上述中的“毛子”,再按下方向键使“鸡”被入选,那时候下拉列表框的 onchange
事件还没被触发,但一而再再而三按下方向键,选中“鸭”时,onchange
事件被触发,也即:运用方向键进行精选时,当选中项由四个 optgroup
的选项换来另风华正茂 optgroup 的选项时,不会触发 onchange

消释办法是:为下拉列表框扩充 onkeydown 或 onkeyup 事件,和 onchange
一起协理化解此主题素材,那五个事件在 XHTML 1.0 中也是收获帮衬的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注