select实现多选下拉框多选有办法实现吗

来源：蜘蛛抓取(WebSpider) 时间：2017-12-24 00:36 标签： js实现select下拉多选
select支持多选的方法
&select size="10" multiple="multiple" id="multipleselect" name="multipleselect"&
&option&XHTML&/option&
&option&CSS&/option&
&option&JAVASCRIPT&/option&
&option&XML&/option&
&option&PHP&/option&
&option&C#&/option&
&option&JAVA&/option&
&option&C++&/option&
&option&PERL&/option&
multiple&-- 可以有多个选择
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。你可能感兴趣的文章
扫描二维码用手机看文章两个Select标签内容多选切换之jquery方法
利用jquery实现两个select标签多选内容从一个标签选择到另外一个标签的简单方法，区区几行就能解决问题。
效果如下所示：
本例中用到jquery请自行下载。若有不明白或者有新的功能需求请留言
代码如下：
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN"&
&TITLE&select标签
&META NAME="Generator"
CONTENT="EditPlus"&
&META NAME="Author" CONTENT=""&
&META NAME="Keywords"
CONTENT=""&
&META NAME="Description"
CONTENT=""&
&script type="text/javascript"
src="jquery.js"&&/script&
&SCRIPT LANGUAGE="JavaScript"&
$(document).ready(function() {
$("#toRight").click(function(){
$("#selectLeft option:selected").each(function(){
$("#selectRight").append("&option value=" +
$(this).val() + "&" + $(this).html() +
"&/option&");
$(this).remove();
$("#toLeft").click(function(){
$("#selectRight option:selected").each(function(){
$("#selectLeft").append("&option value=" +
$(this).val() + "&" + $(this).html() +
"&/option&");//这个方法是默认在后面添加
//$("#selectLeft option:first").before("&option
value=" + $(this).val() + "&" + $(this).html() +
"&/option&");
//此种方法是在select前面加内容
//$("#selectLeft option[value=3]").before("&option
value=" + $(this).val() + "&" + $(this).html() +
"&/option&");
//此种方法是在selectt指定某一行加内容
$(this).remove();
&select size='10' multiple id="selectLeft"
style="width:200px"&
&option value="0"&Jquery
API&/option&
value="1"&JavaScript高级程序设计&/option&
value="2"&锋利的jQuery&/option&
&option value="3"&JavaScript
设计模式&/option&
value="4"&JavaScript+DOM高级程序设计&/option&
value="5"&PHP高级程序设计&/option&
value="6"&面向对象程序设计&/option&
&input type="button" value="
&& " id="toRight"
&input type="button" value="
&& " id="toLeft"
&select size='10' multiple id="selectRight"
style="width:200px"&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。项目中要实现多选，就想到用插件，选择了bootstrap-select。
附上官网api链接，.
没有中文的。对付看吧。有机会每个方法实践一下，会总结的。我自己也等着呢。
需要引用的它们
&!-- Latest compiled and minified CSS --&
&link rel="stylesheet" href="/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css"&
&!-- Latest compiled and minified JavaScript --&
&script src="/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"&&/script&
&!-- (Optional) Latest compiled and minified JavaScript translation files --&
&script src="/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"&&/script&
官网有的，期待翻译。。。
官网有的，期待翻译。。。
bootstrap布局后，select多选代码如下
　　　　　　　　　　　　　　 &div class="form-group"&
&label class="col-sm-3 control-label"&客资类型：&/label&
&div class="col-sm-4"&
&select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple data-live-search="false"&
&option value="0"&苹果&/option&
&option value="1"&菠萝&/option&
&option value="2"&香蕉&/option&
&option value="3"&火龙果&/option&
&option value="4"&梨子&/option&
&option value="5"&草莓&/option&
&option value="6"&哈密瓜&/option&
&option value="7"&椰子&/option&
&option value="8"&猕猴桃&/option&
&option value="9"&桃子&/option&
$(window).on('load', function () {
$('#usertype').selectpicker({
'selectedText': 'cat'
页面效果：
选择后的效果如下：
获取值，&$("#XXX").val()即可&
回显操作：
用方法&$('.selectpicker').selectpicker('val', 'Mustard');&&
Mustard处填入数组。代码如下：
var str='3,4,5,6';
var arr=str.split(',');
$('#usertype').selectpicker('val', arr);
阅读(...) 评论()

我要回帖

更多关于 js实现select下拉多选 的文章

 

随机推荐