UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

移动端弹出列表选择框

所属分类：输入-选择框

 44731  352  查看评论 (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>
相关插件-选择框
查看更多

div模拟radio和checkbox

 简单实用的自定义radio和checkbox
  选择框
 27109  290

移动端城市搜索选择(原创)

 原创，代码简单易修改。类仿大众点评选择城市的部分，只是部分不必要功能没有。有备注！json可修改！
  选择框
 25982  324

城市选择器，仿猎聘，支持多选，单选

 城市选择器，仿猎聘，支持多选，单选
  选择框
 43305  421

基于citypicker做四级联动，数据异步获取，动态赋值

 参照、修改citypicker做四级联动，数据异步获取，动态赋值
  选择框
 22976  291

讨论这个项目（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
    样式都没控制好，居然会影响到我原有界面的样式，为了这个再把我原来的样式改一遍？太坑 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复