dropdown

功能描述

jQuery自定义down选择插件 移动端

快速使用

  1. // 一、 引入静态资源 
  2. <link rel= "stylesheet" href = "./asset/down.min.css"> 
  3. <script src= "./jquery-1.11.0.min.js" > < /script> 
  4. <script src="./asset / down.min.js "></script>
  5. // 或 
  6. <script src="./asset/down.js"></script>
  8. // 二、html里面写入目标dom
  9. <div class="zp_input " id="multipleSelect ">多选请选择</div>
  10. // 或 
  11. <input class=" zp_input " id="singleSelect " readonly placeholder="单选请选择 "/> 
  12. <!-- 提示文案 --> 用于提示用户是否必选 
  13. <div class="tool_tip "></div>
  15. // 三、js初始化
  16. var single = new down({
  17.     dom: 'singleSelect', //点击触发下拉的选择框的id   
  18.     type: 'single', //是单选还是多选 单选 single 多选 multiple   
  19.     title: '单选请选择', //选择框title   
  20.     required: true, //是否必填 true:必填 ，false : 非必填   
  21.     requiredTip: '当前为必填项', // required为true，用户没有选择的提示文案    
  22.     dataArr: [{
  23.         id: '1',
  24.         cont: '内容1'
  25.     }, {
  26.         id: '2',
  27.         cont: '内容2'
  28.     }, {
  29.         id: '3',
  30.         cont: '内容3'
  31.     }, {
  32.         id: '4',
  33.         cont: '内容4'
  34.     }, {
  35.         id: '5',
  36.         cont: '内容5'
  37.     }], //选择的选项数据，为3的倍数，不足用 '' 代替   
  38.     success: function(resp) { // 回调函数    
  39.         console.log(resp) if (resp.length > 0) {
  40.             $('#singleSelect').val(resp[0].cont)
  41.         }
  42.     }
  43. })

特别说明