移动端弹出列表选择框

所属分类:输入-选择框

 33978  296  查看评论 (20)
分享到微信朋友圈
X
移动端弹出列表选择框 ie兼容9

使用方法

引入以下文件

<!--必要样式-->
<link rel="stylesheet" href="css/pickout.css">
<script src="js/pickout.js"></script>

Html

<select name="city" id="city" class="city pickout" placeholder="选择一个城市">
    <option data-icon="&spades;" value="bj">北京</option>
    <option data-icon="&clubs;" value="sh">上海</option>
    <option data-icon="&hearts;" value="gz">广州</option>
    <option selected data-icon="&diams;" value="sz">深圳</option>
    <option data-icon="&#9786;" value="xg">香港</option>
    <option data-icon="&#9792;" value="sjz">石家庄</option>
    <option data-icon="&#9794;" value="cd">成都</option>
</select>

js

<script>
	// Preparar o select
	//pickout.to('.pickout');
	pickout.to({
		el:'.city',
		theme: 'dark', 
		search: true
	});
	// Caso o valor já venha do servidor, já atribui a sele??o automaticamente
	pickout.updated('.city');
	
</script>
相关插件-选择框

jQuery双列表左右切换选择

左右切换选择,多项选择,并可以回到原始位置而不是向下或向上累加,超出出现滚动条
  选择框
 32212  320

vue选择检索国家页面模板(原创)

vue.js基于json异步调用可选择并且可以通过国家名称和手机区号进行检索相应的国家,并且有中文、日语、英语、越南语、韩语、五种语言,这些语言的显示是根据游览器语言而定。代码比较容易理解,用起来很方便。(支持多语言自适应手机和网站)
  选择框
 16190  213

jquery城市选择插件lazyload-min.js

jquery城市选择插件lazyload-min.js
  选择框
 63239  423

穿梭框(原创)

基于vue的双列表选择插件
  选择框
 23780  256

讨论这个项目(20)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    刹那流年? 1
    2020/8/10 11:01:44

    $("#city").val();

    IOS取不到值的话可以用

    var t = $(".pk-field").html();
    var option = $("#city option");
    for (var i = 0; i < option.length; i++) {
        if (t == option[i].text) {
            value = option[i].value;
            break;
        }
    }

    来获取

    回复
    袋子溺鱼 0
    2020/5/19 16:01:44
    注意,这个在IOS情况下,如果增加了 $(select).trigger("change");  
    做了联动的下拉框,会有问题。 请高手支招。
        袋子溺鱼0
        2020/5/19 16:10:36
        在IOS中,$("#select1").val(); 取不到值。。
        袋子溺鱼0
        2020/5/19 16:25:15
        IOS中联动,这样也取不到值。
        var checkValue = $("#select1").find("option:selected").val(); //获取Select选择的Value.
    回复
    D 0
    2020/3/26 15:03:25
    _苏言_ 0
    2020/2/24 11:16:15
    biubiubiu 0
    2019/9/19 18:15:36
    有大佬解决onchange无法触发的问题了吗,求助
        叁仟世界1
        2019/11/6 11:52:30

        改下载的源码,可能不对但可以参考下:
        在js中 createOption 函数里面// Event listener

        item.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
        
            // Converting to array, because it is a (object) HTMLCollection 
            [].slice.call(select.children).map(function(item, index) {
                if (index === data.index) {
        
                    item.setAttribute('selected', 'selected');
                    $(select).trigger("change"); //主动触发onchange事件
                    return;
                }
        
                item.removeAttribute('selected');
            });
        
            feedInput(select, txt.innerHTML);
            closeModal();
        }, false);
    回复
    一?ふ?你 0
    2019/6/24 13:46:54
    为什么我从后台拿数据的时候,相同的加selected,默认的数据不对,得需要在点击才能看到默认选中效果,不用你这个插件可以正常显示,用了你的插件却在点击选择时才有这个效果,这个能修复一下么,你这个插件挺美观的,不想换掉 回复
    无节操?? 0
    2019/5/21 14:23:39
    愿做汝夫。 0
    2019/5/5 16:48:59
    我想知道 这个为什么对于ios系统不好使呢
        袋子溺鱼0
        2020/5/19 15:33:06
        我也遇到了同样问题。
        增加的 $(select).trigger("change"); //主动触发onchange事件
        在IOS下好像有问题。
    回复
    0
    2019/4/21 2:24:10
    onchange 事件无法使用 回复
    漫行 0
    2019/4/10 16:28:55
    样式都没控制好,居然会影响到我原有界面的样式,为了这个再把我原来的样式改一遍?太坑 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复