Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 js下拉列表框操作示例总结

js下拉列表框操作示例总结

发布时间:2015-04-27   编辑:www.jquerycn.cn
分享下js脚本操作下拉列表框的方法,一个javascript中操作下拉列表框的实例代码,有需要的朋友参考下。

例子,js下拉列表框操作实例。

代码:
 

复制代码 代码示例:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title>JavaScript下拉列表框操作_www.jquerycn.cn</title> 
<mce:script  language="JavaScript" type="text/javascript">
<!-- 
    //移动下拉框被选中选项 
    //fromSelId :源下拉框id 
    //toSelId   :目标下拉框id 
    function moveOption(fromSelId,toSelId){ 
        var fromSel = document.getElementById(fromSelId); 
        var toSel = document.getElementById(toSelId); 
 
        if(fromSel==null||toSel==null){ 
            return false; 
        } 
 
        for(var i = 0;i < fromSel.options.length;i++){ 
            var _option = fromSel.options[i]; 
            //是否选中 
            if(_option.selected){ 
                //往目标下拉框加添加选项 
                toSel.appendChild(_option); 
                i--;//下标变了 
            } 
        } 
    } 
// --></mce:script> 
</head>
<body bgcolor="abcdef"> 
<form id='demoFrm' name="demoFrm" method="post" action="" > 
<table border="1" align="center" width="300"> 
<tr> 
    <td colspan="3" align="center">下拉列表操作演示</td> 
</tr> 
<tr> 
    <td  align="center" width="100"> 
        <select multiple="multiple" size="10" id="leftSel"> 
            <option value="1">第一个理拉框的值1</option> 
            <option value="2">第一个理拉框的值2</option> 
            <option value="3">第一个理拉框的值3</option> 
            <option value="4">第一个理拉框的值4</option> 
        </select> 
    </td> 
    <td align="center" width="100"> 
        <input type="button"  id="moveTwo" value="-->>" onclick="moveOption('leftSel','rightSel');"> 
        <br> 
        <input type="button"  id="moveOne" value="<<--" onclick="moveOption('rightSel','leftSel');"> 
    </td> 
    <td align="center" width="100"> 
        <select multiple="multiple" size="10" id="rightSel"> 
            <option value="1">第二个理拉框的值1</option> 
            <option value="2">第二个理拉框的值2</option> 
            <option value="3">第二个理拉框的值3</option> 
            <option value="4">第二个理拉框的值4</option> 
        </select> 
    </td> 
</tr> 
</table> 
</form> 
<div id="showContent" style="font-size:30px;" mce_style="font-size:30px;"> 
</div> 
</body> 
</html>

向select对象添加option的2种常见方法。

方法1:
 

复制代码 代码示例:
var option = new Option(text,value);//注意参数1为文本显示值,参数为value值 
selectobj.options.add(option); 

方法2:
 

复制代码 代码示例:
roption = document.createElement("option");    
option.appendChild(document.createTextNode("text"));    
option.setAttribute("value","value");    
selectobj.appendChild(option );   

重要属性
1,options(为一个Option对象数组)
2,selectedIndex 为选中项的索引

重要方法
1,appencChild(option)添加一个选项
2,remove(0)  0表示索引号

您可能感兴趣的文章:
js下拉列表框操作示例总结
jquery获取form表单元素值的实例
jQuery select操作方法总结
JQuery 常用操作代码
jquery 操作input标签方法大全
jQuery 操作下拉列表框的实例分享
利用jquery操作select下拉列表框的代码
浅析jQuery对select操作小结(遍历option,操作option)
js如何获取下拉列表值与元素个数
JQuery 文本框操作的4个小例子

关键词: 下拉列表框   
[关闭]