如何使select2插件下拉框多选并获取选中的值

第一步，创建静态页面select.html，引入select2相关的css和js文件，并引入jQuery核心js，如下图所示：

第二步，在body标签内插入select元素，设置属性multiple和class，宽度为300px，如下图所示：

第三步，初始化select2插件，需要调用select2()方法，如下图所示：

第四步，为了演示获取下拉框值，这里利用button按钮点击事件，在select下方插入一个button按钮，如下图所示：

第五步，编写按钮点击事件，事件里获取多选下拉框值和文本内容，如下图所示：

6

第六步，在浏览器中进行预览，点击“取值”按钮，会看到打印下拉框选择的值和文字，如下图所示：

清空option 不是很难的 *** 作。只需要遍历现有option，将其每个子元素都置空即可。

代码如下：

function clearOption(selectId){

var selectObj = document.getElementById(selectId)

for(var i = 0,len = selectObj.options.lengthi <leni++){

selectObj.options[0] = null

}

}

//使用时只需填写两个select的id 反向移动交换两个id即可

function mOption(select1, select2){//第一个select的id，第二个select的id

     for(var i = select1.options.length - 1  i >= 0  i--){

if(select1.options[i].selected){

    var option = new Option(select1.options[i].text,select1.options[i].value)

    option.selected = true

    select2.options.add(option)//添加到到第二个select里面

    select1.remove(i)//从第一个里面移除

}

    }

}

---