手机端移动端的选择框mobileSelect.js使用

文件地址:https://github.com/onlyhom/mobileSelect.js

请感兴趣的自行下载

使用过程

1 引入标签

<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">

<script src="js/mobileSelect.js" type="text/javascript"></script>

这里我引入的是mini 其实一样用

2 数据初始化

//获取物流公司信息
$delivery=model('Delivery');
$expressComList=$delivery->expressName;
$data=array();
$i=0;
foreach($expressComList as $k=>$v){
$data[$i]['id']=$k;
$data[$i]['value']=$v;
$i++;
}
$this->assign('expressComList',json_encode($data));

3 使用普通数组的联动

<p><input type="text" id="express_trigger" name="express_name"  class="placeholder_99" placeholder="物流公司" /></p>

JS 函数部分

var mobileSelect = new MobileSelect({
trigger: '#express_trigger',
title: '单项选择',
wheels: [
{data:{$expressComList}}
],
position:[], //初始化定位
callback:function(indexArr, data){
mobileSelect.position=[indexArr];
$('#express_code').val(data[].id);
$('#express_trigger').val(data[].value);
}
});

 

 4  剩下的就是获取数据了  本文不在描述

手机端移动端的选择框mobileSelect.js使用的更多相关文章

  1. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  2. js手机移动端选择插件 mobileSelect.js

    一.mobileSelect获取方法 mobileSelect支持单选.多级联动.自定义回调函数.二次渲染.最新版本下载地址[2017-09-21更新]: https://github.com/onl ...

  3. 通过UA实现手机端电脑端的分离!(重点)

    实现Nginx区分PC和手机访问不同的网站是物理上完全隔离的两套网站(一套手机端.一套pc端) 这样带来的好处pc端和移动端的内容可以不一样,移动版网站不需要包含特别多内容.只要包含必要的文字和较小的 ...

  4. 手机端file限制只能选择图片、视频、音频,直接打开摄像头拍照或录像

    限制只能选择图片 <input type="file" accept="image/*"> 限制只能选择视频 <input type=&quo ...

  5. js 手机端触发事事件、javascript手机端/移动端触发事件

    处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 ...

  6. 手机端上点击input框软键盘出现时把input框不被覆盖,显示在屏幕中间(转)

    转载地址:https://www.cnblogs.com/xzzzys/p/7526761.html 1  用定位为题来解决var oHeight = $(document).height(); // ...

  7. jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件

    支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...

  8. 手机端上传未知图片大小,js设置宽高比例

    <style rel="stylesheet" type="text/css"> .lunboimg{ width: 100%; height: a ...

  9. wap手机端解决返回上一页,js

    <input id="hd_referrer" type="hidden" />                <a href="j ...

随机推荐

  1. 局部加权回归、欠拟合、过拟合(Locally Weighted Linear Regression、Underfitting、Overfitting)

    欠拟合.过拟合 如下图中三个拟合模型.第一个是一个线性模型,对训练数据拟合不够好,损失函数取值较大.如图中第二个模型,如果我们在线性模型上加一个新特征项,拟合结果就会好一些.图中第三个是一个包含5阶多 ...

  2. javascript 实现tab菜单切换

    <!DOCTYPE html> <html> <head> <title></title> </head> <body s ...

  3. Linux shell的输入输出

    echo --echo命令可以显示文本行或变量,或者把字符串输入到文件 --echo [option] string -e 解析转义字符 例如:echo -e "nimenhao\nasfd ...

  4. jQuery mouseover与mouseenter的区别

    在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...

  5. 爬虫技术实战 | WooYun知识库

    爬虫技术实战 | WooYun知识库 爬虫技术实战 大数据分析与机器学习领域Python兵器谱-大数据邦-微头条(wtoutiao.com) 大数据分析与机器学习领域Python兵器谱

  6. sticky footer布局,定位底部footer

    其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...

  7. Ubuntu16.04 使用lvm挂载硬盘以及扩容

    1.首先通过fdisk -l 查看磁盘的属性,找到要添加的磁盘名称(Disk /dev/sda) 2.使用fdisk将磁盘进行逻辑分区 fdisk /dev/sda m来查看命令帮助 n添加一张新的p ...

  8. smarty学习——编程知识

    smarty 提供了丰富的api 接口可以方便我们进行操作: 1.clear_all_assign清除所有赋值 2.clear_all_cache清除所有缓存 3.clear_assign清除赋值 4 ...

  9. Gridview的RowDataBound事件可以做很多事情

    protected void gvTest_RowDataBound(object sender, GridViewRowEventArgs e)        {            //如果是绑 ...

  10. SSH 框架的心得

    使用SSH框架做完了一个普通网站的前后台项目,成热写点心得,免得以后再入坑.其中使用 Strust2  2.3.33 + Spring 4.3.9 + Hibernate 5.2.10 eclipse ...