<select> 标签的 multiple 属性规定可同时选择多个选项。[通俗易懂]

<select> 标签的 multiple 属性规定可同时选择多个选项。[通俗易懂]1.使用multiple属性可以实现多选multiple=”multiple”size=”2″>VolvoSaabOpelAudi2.pageEncoding=”GBK”%>报表定制.tabstyletabletrtd{b_selectmultiple多选

<select> 标签的 multiple 属性规定可同时选择多个选项。[通俗易懂]

1.使用multiple属性可以实现多选

<select multiple="multiple" size=”2″>

<option value =”volvo”>Volvo</option>

<option value =”saab”>Saab</option>

<option value=”opel”>Opel</option>

<option value=”audi”>Audi</option>

</select>

2.<%@ page language=”java” contentType=”text/html; charset=GBK”
    pageEncoding=”GBK”%>
<html>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=GBK”>
        <script type=”text/javascript” src=”js/jquery.js”></script>
        <title>报表定制</title>
        <style type=”text/css”>
.tabstyle table tr td {

    background-color: #ECF5FA;
    height: 25px;
    font-size: 12px;
}
</style>
    </head>
    <body>
        <div class=”tabstyle”>
            <form id=”designForm” action=”projectStatisticsAction.do?method=addDesign” method=”post”>
                <table width=”96%” id=”list” border=”0″ cellpadding=”0″
                    cellspacing=”1″ width=”100%” align=”center”
                    style=”background-color: #A2D5F0;”>
                    <tr>
                        <td align=”right” width=”25%”>
                            统计待显示数据:&nbsp;&nbsp;
                        </td>
                        <td colspan=”3″ width=”75%” align=”center” height=”250″>
                            <table width=”96%” id=”list” border=”0″ cellpadding=”0″
                                cellspacing=”0″ width=”100%” align=”center”
                                style=”background-color: #A2D5F0;”>
                                <tr>
                                    <td width=”15%”>
                                    </td>
                                    <td width=”30%” align=”right” height=”250″>
                                        <select id=”fb_list” multiple=”multiple” size=”15″
                                             style=”width: 150px;”>
                                            <option value=”project_Name”>
                                                项目名称
                                            </option>
                                            <option value=”pm_Name”>
                                                项目经理
                                            </option>
                                            <option value=”contact_Person”>
                                                项目方联系人
                                            </option>
                                            <option value=”person_Tel”>
                                                项目方电话
                                            </option>
                                            <option value=”proj_Depart”>
                                                项目单位
                                            </option>
                                        </select>
                                        &nbsp;&nbsp;
                                    </td>
                                    <td align=”center” width=”5%”>
                                        <input type=”button” id=”add” value=”添加>>” />
                                        <br />
                                        <br />
                                        <input type=”button” id=”delete” value=”<<删除” />
                                    </td>
                                    <td width=”20%” align=”left”>
                                        &nbsp;&nbsp;
                                        <select id=”select_list” multiple=”multiple” size=”15″
                                            style=”width: 150px;”>
                                        </select>
                                    </td>
                                    <td width=”5%” align=”left”>
                                        <input type=”button” name=”s2up” id=”s2up” value=”↑” />
                                        <br />
                                        <input type=”button” name=”s2down” id=”s2down” value=”↓” />
                                    </td>
                                    <td width=”25%”>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr align=”center”>
                        <td colspan=”5″ align=”center” vAlign=middle>
                            <input type=”hidden” value=”” name=”orderName” id=”orderName” />
                            <input type=”hidden” value=”0″ name=”release” id=”release” />
                            <input type=”hidden” value=”” id=”selectName” name=”selectName” />
                            <input type=”hidden” value=”” id=”selectChName”
                                name=”selectChName” />
                            <input type=”submit” id=”submitform” value=”提 交” class=”daochu”
                                οnclick=”return checkSubmit();” />
                            <input type=”button” value=”返 回” onClick=”history.go(-1);”
                                class=”daochu”>
                        </td>
                    </tr>
                    <script>
                /**
                 *动态的给左边的下拉列表创建选项
                 *具体情况可以从数据库读取数据动态创建选项
                 */
                $(function(){

                  $(“#add”).click(function(){

                       if($(“#fb_list option:selected”).length>0)
                       {

                           $(“#fb_list option:selected”).each(function(){

                              $(“#select_list”).append(“<option value='”+$(this).val()+”‘>”+$(this).text()+”</option”);
                              $(this).remove(); 
                           })
                       }
                       else
                       {

                           alert(“请选择要添加的显示数据项!”);
                       }
                   })
                })
                $(function(){

                      $(“#delete”).click(function(){

                           if($(“#select_list option:selected”).length>0)
                           {

                               $(“#select_list option:selected”).each(function(){

                                     $(“#fb_list”).append(“<option value='”+$(this).val()+”‘>”+$(this).text()+”</option”);
                                     $(this).remove(); 
                               })
                           }
                           else
                           {

                               alert(“请选择要删除的数据项!”);
                           }
                     })
                })
                $(function(){

                      $(“#submitform”).click(function(){                
                           if($(“#select_list option”).length>0)
                           {

                               $(“#select_list option”).each(function(){

                                  $(“#selectName”).val($(“#selectName”).val()+”,”+$(this).val());
                                             $(“#selectChName”).val($(“#selectChName”).val()+”,”+$(this).text());                                          
                               })
                
                           }
                           else
                           {

                               alert(“请选择要添加的显示数据项!”);
                                        return false;
                           }
                                  $(“#selectName”).val($(“#selectName”).val().substr(1));
                                  $(“#selectChName”).val($(“#selectChName”).val().substr(1));
                                  $(“#orderName”).val($(“#yiji”).val()+” “+$(“#shengjiang”).val()+”,”+$(“#erji”).val()+” “+$(“#shengjiang2”).val());
                                  
                               
                     })
                })
                //双击实现左右移动
                $(“#select_list”).dblclick(function(){

                     var alloptions = $(“#select_list option”);
                     var so = $(“#select_list option:selected”);
                
                     so.get(so.length-1).index == alloptions.length-1?so.prev().attr(“selected”,true):so.next().attr(“selected”,true);
                    
                     $(“#fb_list”).append(so);
                   });
                  
                   $(“#fb_list”).dblclick(function(){

                     var alloptions = $(“#fb_list option”);
                     var so = $(“#fb_list option:selected”);
                    
                     so.get(so.length-1).index == alloptions.length-1?so.prev().attr(“selected”,true):so.next().attr(“selected”,true);
                    
                     $(“#select_list”).append(so);
                   });
                
                
                 $(“#s2up”).click(function(){

                     var so = $(“#select_list option:selected”);
                     if(so.get(0).index!=0){

                       so.each(function(){

                           $(this).prev().before($(this));
                       });
                     }
                   });
                  
                   $(“#s2down”).click(function(){

                     var alloptions = $(“#select_list option”);
                     var so = $(“#select_list option:selected”);
                    
                     if(so.get(so.length-1).index!=alloptions.length-1){

                       for(i=so.length-1;i>=0;i–)
                       {

                         var item = $(so.get(i));
                         item.insertAfter(item.next());
                       }
                     }
                   });
                
                function checkSubmit() {

                   var yiji =$(“#yiji”).val();
                   var erji =$(“#erji”).val();
                   
                   if(yiji == erji){

                   alert(“一级排序和二级排序不能相同”);
                   return false;
                   }
                   return true;
                  }
                
                </script>
                </table>
                </form>
        </div>
    </body>
</html>

今天的文章<select> 标签的 multiple 属性规定可同时选择多个选项。[通俗易懂]分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/58417.html

(0)
编程小号编程小号

相关推荐

发表回复

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