js,jquery实现下拉列表按顺序显示选择项

最新推荐文章于 2022-05-09 07:15:00 发布

Asterly

最新推荐文章于 2022-05-09 07:15:00 发布

阅读量2k

点赞数

分类专栏： html 文章标签： js x

本文链接：https://blog.csdn.net/Asterly/article/details/84334350

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求是这样的，要求在下拉框中选择一些人员名单，选中的第一人为小组组长，其余的为小组成员。

下拉列表借助于boosrtap-selected框架实现需要到相关的文件，具体相关内容请查看完整代码

实现过程，为select标签绑定一个onchange（）事件，onchange事件中用value()去拿取select的值而不是用text()拿取文本值，也不是用选择器“select option:selected”获取已选择的项。代码如下

<select class="selectpicker"  id="sel" id="sumyear" onchange="show()" multiple> 
         <option value="广东" id="opt">广东省</option>
        <option value="广西" id="opt">广西省</option>
        <option value="福建" id="opt">福建省</option>
        <option value="湖南" id="opt">湖南省</option>
        <option value="山东" id="opt">山东省</option>                            
  </select>
    <br>
 <textarea name="showNmae" id="showNmae" cols="30" rows="10"></textarea>

js的onchange（）代码如下

function show(){
                // var val=$("#sel option:selected").val()
                var val=$("#sel").val();
                
                //判断是否为空
                if(first=="" || val==""){
                    first=val; //将小组组长赋值或设置为空
                    name=val;   //将小组成员赋值或设置为空
                }else{

                    if(!isInArray(val,first)){
                        
                        // 当先有小组组长没在数组中是，则将数组中的第一位设置为小组组长

                        // var len=val.lastIndexOf(",");
                        // console.info("第一个','的位置在："+len)
                        // alert(val[0])
                        // first=val.substring(0,len)

                        first=val[0]
                        name=val
                    }else{

                    }
                    name=val;

                }
                // console.info("first的值："+first)
                // console.info("下拉列表数组的值"+val)
           

            }

因为获取到的文本值是以数组形式存在，需要用循环遍历方式遍历查找小组组长是否还在选项当中，isInArray()代码如下，需要传入两个参数，arr是需要传入的遍历的数组，即选中的小组成员名单，value为需要遍历查找的元素，即小组组长，返回结果类型为Boolean类型。如果存在则返回true，不存在则返回false。

     function isInArray(arr,value){
                console.info("数组长度："+arr.length)
                for(var i = 0; i < arr.length; i++){
                    console.info("数组val["+(i+1)+"]的值："+arr[i])
                    if(value == arr[i]){

                        return true;
                    }
                }
                return false;
            }

最后将提取的信息打印到文本框当中

 $('textarea').text("小组组长：" +first+"\n小组成员："+name);

到此大致内容完成，

不过要注意的是，在小组组长没在数组中是，选则的小组组长是当前数组的第一位，并不是认为选择的第二位成员。

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/select/css/bootstrap-select.css">
    <title>Document</title>
</head>
<body>
    <select class="selectpicker"  id="sel" id="sumyear" onchange="show()" multiple> 
        <option value="广东" id="opt">广东省</option>
        <option value="广西" id="opt">广西省</option>
        <option value="福建" id="opt">福建省</option>
        <option value="湖南" id="opt">湖南省</option>
        <option value="山东" id="opt">山东省</option>                            
    </select>
    <br>
    <textarea name="showNmae" id="showNmae" cols="30" rows="10"></textarea>
    <script src="jquery/jquery.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="bootstrap-3.3.7-dist/select/js/bootstrap-select.js"></script>
    <script src="bootstrap-3.3.7-dist/select/js/i18n/defaults-zh_CN.js"></script>
    <script>
        var first="";
        var name="";
        //判断小组组长是否还在数组当中
            function isInArray(arr,value){
                console.info("数组长度："+arr.length)
                for(var i = 0; i < arr.length; i++){
                    console.info("数组val["+(i+1)+"]的值："+arr[i])
                    if(value == arr[i]){

                        return true;
                    }
                }
                return false;
            }
            //下拉框的change事件
            function show(){
                // var val=$("#sel option:selected").val()
                var val=$("#sel").val();
                
                //判断是否为空
                if(first=="" || val==""){
                    first=val;
                    name=val;
                }else{

                    if(!isInArray(val,first)){
                        // var len=val.lastIndexOf(",");
                        // console.info("第一个','的位置在："+len)
                        // alert(val[0])
                        // first=val.substring(0,len)
                        first=val[0]
                        name=val
                    }else{

                    }
                    name=val;

                }
                console.info("first的值："+first)
                console.info("下拉列表数组的值"+val)
            $('textarea').text("小组组长：" +first+"\n小组成员："+name); 

            }

    </script>
</body>
</html>

Asterly

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js,jquery实现下拉列表按顺序显示选择项

需求是这样的，要求在下拉框中选择一些人员名单，选中的第一人为小组组长，其余的为小组成员。下拉列表借助于boosrtap-selected框架实现需要到相关的文件，具体相关内容请查看完整代码实现过程，为select标签绑定一个onchange（）事件，onchange事件中用value()去拿取select的值而不是用text()拿取文本值，也不是用选择器“select...
复制链接

扫一扫