multiple-select-master使用和取值

最新推荐文章于 2024-03-24 09:41:52 发布
最新推荐文章于 2024-03-24 09:41:52 发布
阅读量3.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lideyuans/article/details/51657211
版权 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <meta content="Multiple Select" property="og:title" />
    <meta content="Multiple select is a jQuery plugin to select multiple elements with checkboxes :)." name="description" />

    <!-- css -->
    <link href="multiple-select-master/docs/css/base.css" rel="stylesheet" />

    <script async="" src="//www.google-analytics.com/analytics.js"></script>
    <script src="multiple-select-master/docs/assets/jquery.min.js"></script>
    <script src="multiple-select-master/docs/assets/es5-shim.min.js"></script>
    <!-- Flatdoc -->
    <script src="multiple-select-master/docs/assets/flatdoc/legacy.js"></script>
    <script src="multiple-select-master/docs/assets/flatdoc/flatdoc.js"></script>

    <!-- Flatdoc theme -->
    <link href="multiple-select-master/docs/assets/flatdoc/theme-white/style.css" rel="stylesheet" />
    <script src="multiple-select-master/docs/assets/flatdoc/theme-white/script.js"></script>

    <!-- Multiple Select -->
    <link href="multiple-select-master/multiple-select.css" rel="stylesheet" />
    <script src="multiple-select-master/multiple-select.js"></script>

    <!--[if lt IE 9]>
        <script src="multiple-select-master/docs/assets/html5shiv.js"></script>
        <script src="multiple-select-master/docs/assets/respond.min.js"></script>
  <![endif]-->

    <script type="text/javascript">
        if (window != top) // 判断当前的window对象是否是top对象
            top.location.href = window.location.href; // 如果不是，将top对象的网址自动导向被嵌入网页的网址
    </script>

    <!-- js -->
    <script src="multiple-select-master/docs/js/index.js"></script>

    <script type="text/javascript">
        function SendMess() {
            var ids="";
            $("input:checkbox[data-name='selectItem']:checked").each(function (i) {
                if (i == 0) {
                    ids = $(this).val();
                    alert(ids);
                }
                else {
                    ids += (";" + $(this).val());
                    alert(ids);
                }
            });

            $("#<%=HiselectID.ClientID%>").val(ids);

            if (ids == "")
            {
                alert("请至少选择一项客户ID！");
                return false;
            }
            else
            {
                $.ajax({
                    url: "xxx.aspx",
                    type: "post",
                    async: false,
                    data: { "Ids": ids },
                    error: function () {
                        alert("系统出错");
                    },
                    success: function (data) {

                    }
                });
                window.location.reload();
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <select id="SelectSearch" class="w300" multiple="multiple" style="display: none;">
                <option value="1">abc</option>
                <option value="2">bcd</option>
                <option value="3">cde</option>
                <option value="4">def</option>
                <option value="5">efg</option>
                <option value="6">fgh</option>
                <option value="7">ghi</option>
                <option value="8">hij</option>
                <option value="9">ijk</option>
                <option value="10">jkl</option>
            </select>
            <div class="ms-parent w300" style="width: 300px;">
                <div class="ms-drop bottom" style="display: none;">
                    <div class="ms-search">
                        <input type="text" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false" />
                    </div>
                    <ul style="max-height: 250px;">
                        <li class="ms-select-all">
                            <label>
                                <input type="checkbox" data-name="selectAll" />
                                [Select all]</label></li>
                        <li class=" " style="false">
                            <label class="" style="display: block;">
                                <input type="checkbox" data-name="selectItem" value="1" /><span>abc</span></label></li>
                        <li class=" " style="false">
                            <label class="" style="display: block;">
                                <input type="checkbox" data-name="selectItem" value="2" /><span>bcd</span></label></li>
                        <li class=" " style="false">
                            <label class="" style="display: block;">
                                <input type="checkbox" data-name="selectItem" value="3" /><span>cde</span></label></li>
                        <li class=" " style="false">
                            <label class="" style="display: block;">
                                <input type="checkbox" data-name="selectItem" value="4" /><span>def</span></label></li>
                        <li class="" style="false">
                            <label class="" style="display: block;">
                                <input type="checkbox" data-name="selectItem" value="5" /><span>efg</span></label></li>
                        <li class=" " style="false">
                            <label class="" style="display: block;">
                                <input type="checkbox" data-name="selectItem" value="6" /><span>fgh</span></label></li>
                        <li class=" " style="false">
                            <label class="" style="display: block;">
                                <input type="checkbox" data-name="selectItem" value="7" /><span>ghi</span></label></li>
                        <li class=" " style="false">
                            <label class="" style="display: block;">
                                <input type="checkbox" data-name="selectItem" value="8" /><span>hij</span></label></li>
                        <li class=" " style="false">
                            <label class="" style="display: block;">
                                <input type="checkbox" data-name="selectItem" value="9" /><span>ijk</span></label></li>
                        <li class=" " style="false">
                            <label class="" style="display: block;">
                                <input type="checkbox" data-name="selectItem" value="10" /><span>jkl</span></label></li>
                        <li class="ms-no-results" style="display: none;">No matches found</li>
                    </ul>
                </div>
            </div>
        </div>
        <input type="hidden" id="hiText" />
        <asp:HiddenField ID="HiselectID" runat="server" />
        <input type="button" οnclick="return Delete()" />
        <script src="multiple-select-master/multiple-select.js"></script>
        <script>
            $("#SelectSearch").multipleSelect({
                filter: true
            });
        </script>
    </form>
</body>
</html>

</pre><pre code_snippet_id="1715223" snippet_file_name="blog_20160613_3_7631977" name="code" class="html">//代码地址http://download.csdn.net/detail/deyuanyangjia1314/9547939//效果如图所示


 


 

                

        

        

    




    

      

        

            

              
                
                  lideyuans
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  3
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
MultiMenuSelect:三级或多级选择菜单，支持左右滑动

				
			

			

				

					06-16
				

			

		

		

			
				
MultiMenuSelect
三级或多级选择菜单，支持左右滑动！目前只写了一个三级的demo，不过有了这个实现4级及以上会很容易了
如图：

			
		

	



                

              
                



	

		

			

				
					
Android常用开源库整理汇总

				
			

			

				

					weixin_34233679的博客
				

				

					09-05
					
					758
					
				

			

		

		

			
				
1.基本控件
1.1.TextView

ScrollNumber
ReadMoreTextView
HtmlImage
android-autofittextview
html-textview
BabushkaText
ticker
ExpandableTextView
Android-TextView-LinkBuilder
TextJustify...

			
		

	



                


  
              

                


	

		

			

				
					
探索 Multiple Select：一个强大的多选插件

					
最新发布

				
			

			

				

					gitblog_00021的博客
				

				

					03-24
					
					422
					
				

			

		

		

			
				
探索 Multiple Select：一个强大的多选插件
项目地址:https://gitcode.com/wenzhixin/multiple-select
在前端开发中，我们常常需要处理选择列表，特别是当用户需要一次选取多个选项时。为了解决这一需求，开发者们创建了许多插件，而今天我们要介绍的就是 Multiple Select，由 wenzhixin 开发的一款高效、灵活的 jQuery 多选...

			
		

	





	

		

			

				
					
multiple-select多选框使用记录

				
			

			

				

					chenfeiwanghan的博客
				

				

					02-16
					
					954
					
				

			

		

		

			
				
("#cf").multipleSelect("getSelects", "text")  获取下拉框text值，“，拼接”$("#cf").multipleSelect("getSelects")  获取下拉框value值，“，拼接”3.动态设置属性后，最后也需要设置，否则在下拉框中无法查看数据。5.清空下拉框内容，一定('refresh');4.重置下拉框数据（下拉框内容不清空）

			
		

	



		

			
		



	

		

			

				
					
multiple-select 单选框多选框的用法

				
			

			

				

					qq_38062838的博客
				

				

					11-02
					
					4475
					
				

			

		

		

			
				
multiple-select 单选框多选框的用法

			
		

	





	

		

			

				
					
multiple-select下拉多选框使用（新增）

				
			

			

				

					taogunet的博客
				

				

					02-02
					
					3637
					
				

			

		

		

			
				
因一老项目需要改造原select选择框为多选框，选定使用multiple-select完成。
官方示例地址：http://multiple-select.wenzhixin.net.cn/examples
git资源地址：https://github.com/wenzhixin/multiple-select
需要再代码中引入文件
multiple-select.min.css
multiple-select.min.js
multiple-select-zh-CN.min.js （如不引入，全选会显示se

			
		

	





	

		

			

				
					
select多选 multiple的使用示例

				
			

			

				

					09-04
				

			

		

		

			
				
使用multiple可以实现select多选，本例将为大家介绍下select多选 multiple的使用，新手朋友们可以学习下

			
		

	





	

		

			

				
					
Multiple Select 的简单使用

				
			

			

				

					qq_36716410的博客
				

				

					04-01
					
					1万+
					
				

			

		

		

			
				
首先了解：

Multiple Select 是一个通过复选框来选择多元素的 jQuery 插件:).
官网地址：http://multiple-select.wenzhixin.net.cn/zh-cn/home/

有例子+文档

下面是简单使用的总结：


文件引用：
  <link href="~/Content/multiple/multiple-select.css" re...

			
		

	





	

		

			

				
					
multiple-select 多选下拉框

				
			

			

				

					qq_41722795的博客
				

				

					07-23
					
					1523
					
				

			

		

		

			
				
1. 下载源码和文档

git-hub 源码：https://github.com/wenzhixin/multiple-select

参考文档：https://multiple-select.wenzhixin.net.cn/docs/en/options.html

2. 解压找到 dist 文件夹



3. 个人示例


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"&.

			
		

	





	

		

			

				
					
vue antd项目实战——select组件mode=“multiple“多选模式下限制选择个数

				
			

			

				

					XSL_HR的博客
				

				

					03-27
					
					4947
					
				

			

		

		

			
				
往期知识调用（步骤不懂就看这儿）

			
		

	





	

		

			

				
					
<select> 标签的 multiple 属性规定可同时选择多个选项。

					
热门推荐

				
			

			

				

					gtlishujie的博客
				

				

					08-19
					
					1万+
					
				

			

		

		

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

multiple="multiple" size="2">
Volvo 

Saab 

Opel
Audi

2.
    pageEncoding="GBK"%>

    
        
        
        报表定制
        
.tabstyle table tr td {
    b

			
		

	





	

		

			

				
					
multiple-Select.js

				
			

			

				

					02-07
				

			

		

		

			
				
多选框要用到的js  multiple-Select.js 用的时候引用到文件中

			
		

	





	

		

			

				
					
multiple-select-1.5.2_lamp7ds_css/multiple-select_

				
			

			

				

					09-30
				

			

		

		

			
				
实现select下拉框多选功能原码包，这是我从原网站下载的

			
		

	





	

		

			

				
					
multiple-select-master

				
			

			

				

					11-05
				

			

		

		

			
				
使用multiple可以实现select多选，本例将为大家介绍下select多选 multiple的使用，新手朋友们可以学习下

			
		

	





	

		

			

				
					
search-multiple-select:可搜索的多重选择React组件-npm

				
			

			

				

					05-11
				

			

		

		

			
				
npm install --save search-multiple-select 桌面演示： 用法 import React , { Component } from 'react' import MultipleSelect from 'search-multiple-select' import 'search-multiple-select/dist/index.css' ...

			
		

	





	

		

			

				
					
jQuery multiple-select-master 插件

				
			

			

				

					05-26
				

			

		

		

			
				
jQuery multiple-select-master 插件

			
		

	





	

		

			

				
					
基于STM32的u8g2移植以及学习

				
			

			

				

					m0_51274562的博客
				

				

					11-28
					
					4755
					
				

			

		

		

			
				
U8g2是嵌入式设备的单色图形库。主要应用于嵌入式设备，包括我们常见的单片机使用，最常用的是OLED屏或者LCD屏进行使用的一个库；我们常用的OLED屏其内部原理一个M x n 的像素点阵，想显示什么就得把具体位置的像素点亮起来。对于每一个像素点，有可能是1点亮，也有可能是0点亮；其坐标系如下所示。

			
		

	





	

		

			

				
					
Android常用开源库种类大全

				
			

			

				

					weixin_43901866的博客
				

				

					02-27
					
					9814
					
				

			

		

		

			
				
## 1.基本控件

### [](https://www.yundashi168.com/articles/2018/09/12/1536725366888.html#11textview)1.1.TextView

*  [ScrollNumber](https://github.com/a-voyager/ScrollNumber)
*  [ReadMoreTextView](https...

			
		

	





	

		

			

				
					
多选下拉框实现方式

				
			

			

				

					m0_38051458的博客
				

				

					05-22
					
					3964
					
				

			

		

		

			
				
前端插件 select 多选框

			
		

	





	

		

			

				
					
npm install uni-multiple-select

				
			

			

				

					05-17
				

			

		

		

			
				
这个命令是用来在你的项目中安装 uni-multiple-select 这个包的。uni-multiple-select 是一个 Vue.js 组件，可以提供多选框选择功能。安装这个包的步骤如下：

1. 打开终端，进入你的项目根目录。
2. 运行命令 `npm install uni-multiple-select`。
3. 等待安装完成后，在你的 Vue 组件中引入 uni-multiple-select 组件。
4. 在模板中使用 uni-multiple-select 标签，并配置相应的属性和事件。

举个例子，你可以在组件中这样引入和使用 uni-multiple-select 组件：

```
<template>
  <div>
    <uni-multiple-select v-model="selected" :options="options"></uni-multiple-select>
  </div>
</template>

<script>
import UniMultipleSelect from 'uni-multiple-select'

export default {
  components: {
    UniMultipleSelect
  },
  data() {
    return {
      selected: [],
      options: [
        { label: '选项1', value: 1 },
        { label: '选项2', value: 2 },
        { label: '选项3', value: 3 }
      ]
    }
  }
}
</script>
```

这样就可以在你的页面中显示一个多选框，用户可以选择其中的选项，并且你可以通过 `v-model` 指令来绑定选中的值。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值