All Projects → microzz → select-plugin

microzz / select-plugin

Licence: other
💎一个三级联动小插件

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to select-plugin

react-native-select-multiple
☑️ A customiseable FlatList that allows you to select multiple rows
Stars: ✭ 155 (+216.33%)
Mutual labels:  select
react-native-modal-select-list
☝️ React Native modal component to select options from list
Stars: ✭ 40 (-18.37%)
Mutual labels:  select
vue-gridmultiselect
Simple multi-select component with items displayed in a table like UI
Stars: ✭ 41 (-16.33%)
Mutual labels:  select
form-data-json
A zero dependency, cross browser library to easily get or set/manipulate form input values as/from a json object.
Stars: ✭ 37 (-24.49%)
Mutual labels:  select
linq
A familiar set of functions that operate on JavaScript iterables (ES2015+) in a similar way to .NET's LINQ does with enumerables.
Stars: ✭ 39 (-20.41%)
Mutual labels:  select
selectr
✅ The coolest jQuery select plugin you've never seen
Stars: ✭ 19 (-61.22%)
Mutual labels:  select
react-native-select-pro
React Native dropdown (select) component developed by Mobile Reality
Stars: ✭ 79 (+61.22%)
Mutual labels:  select
bootstrap-selectsplitter
Transforms a <select> containing one or more <optgroup> into two chained <select>
Stars: ✭ 27 (-44.9%)
Mutual labels:  select
nhn next gameserver lab 2017 chatServer
NHN Next의 2017년 게임서버 과정 수업에 사용할 채팅 서버. select 기반
Stars: ✭ 32 (-34.69%)
Mutual labels:  select
react-native-multiple-select
Customizable & Animated, Easy to Use Multiple Select Library for React Native
Stars: ✭ 31 (-36.73%)
Mutual labels:  select
Algorithms
Java implementation for Introduction to Algorithms book.
Stars: ✭ 58 (+18.37%)
Mutual labels:  select
react-functional-select
Micro-sized & micro-optimized select component for React.js
Stars: ✭ 165 (+236.73%)
Mutual labels:  select
tunnel
一款单线程、轻量级和高性能的内网穿透程序,支持TCP流量转发(支持所有TCP上层协议,包括HTTP,SSH等),支持多客户端同时连接
Stars: ✭ 39 (-20.41%)
Mutual labels:  select
ionic-selectable-demo
Ionic SelectSearchable Demo.
Stars: ✭ 22 (-55.1%)
Mutual labels:  select
epump
ePump是一个基于I/O事件通知、非阻塞通信、多路复用、多线程等机制开发的事件驱动模型的 C 语言应用开发框架,利用该框架可以很容易地开发出高性能、大并发连接的服务器程序。
Stars: ✭ 26 (-46.94%)
Mutual labels:  select
bootstrap5-tags
Replace select[multiple] with nices badges for Bootstrap 5
Stars: ✭ 58 (+18.37%)
Mutual labels:  select
ng-mat-select-infinite-scroll
Infinite Scroll directive for angular material select component
Stars: ✭ 39 (-20.41%)
Mutual labels:  select
Tiginx
Tiginx is a Shanzhai Nginx project , please buyao use it xian , if meet problem , I no fuze ...
Stars: ✭ 29 (-40.82%)
Mutual labels:  select
frontal
An Angular select/dropdown component
Stars: ✭ 20 (-59.18%)
Mutual labels:  select
Selectable
Touch enabled selectable plugin inspired by the jQuery UI widget.
Stars: ✭ 131 (+167.35%)
Mutual labels:  select

select-plugin

介绍

一个三级联动的生成器插件,默认生成中国地区🇨🇳的三级联动数据,也可以自定义数据。

安装

输入 npm install select-plugin .

最好先初始化一下package.json文件,输入 npm init -y,然后再执行安装npm install select-plugin

使用

默认数据

引入js文件。
在html文件中插入<script src="./node_modules/select-plugin/dist/select-plugin-all.js"></script>
然后
<script>new Select()</script>
默认就可以生成中国地区的三级联动数据啦😄

自定义数据

如果你只使用自定义的数据,建议只引入不包含地区数据的js文件,
<script src="./node_modules/select-plugin/dist/select-plugin.js"></script>
这样文件大小可以减少很多,毕竟大中国地区数据太庞大了😇但是务必传递传递相关参数!

new Select('.container', data, id, text);

参数依次是插入父容器位置(默认是body,参数是CSS3选择器的形式,如'#id' , ' .className'),数据,在DOM元素的id,显示的文本

示例

<!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">
  <title>三级联动生成器插件</title>
</head>
<body>
  <div class="container"></div>

  <script src="./node_modules/select-plugin/dist/select-plugin-all.js"></script>
  <script>
  // 不传任何参数,默认生成中国地区三级联动
    new Select();

  // 自定义数据
    var data = {
                One: ['a1', 'a2', 'a3'],
                Two: [
                  ['a11', 'a12', 'a13'],
                  ['a21', 'a22'],
                  ['a31', 'a32']
                ],
                Three:  [
                  [['a111', 'a112'], ['a121', 'a122'], ['a131', 'a132']],
                  [['a211', 'a212'], ['a221', 'a222']],
                  [['a311'], ['a312']]
                ]
              };
    var id = ['one', 'two', 'three'];
    var text = ['选项1', '选项2', '选项3'];
    // 参数依次是插入父容器位置,数据,DOM的id,显示的文本
    new Select('.container', data, id, text);
  </script>
</body>
</html>

效果预览

select-plugin

在线预览

在线预览地址1
在线预览地址2

About

GitHub: https://github.com/microzz
个人网站:https://microzz.com/

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].