jQuery黑白两种响应式手机下拉框select

好不容易找到的响应式下拉框演示，在苹果浏览器下拉框是居左的，不好控制，本文的是css+jQuery制作的下拉框select,兼容主流浏览器，你可以缩小浏览器看看效果。

淘建站为您提供更多_表单代码_下拉框select_select_下拉框，在此特别感谢您对我们的支持与厚爱！

下拉框html代码

<div class="select">
    <span class="placeholder">请选择</span>
    <ul>
        <li>百度</li>
        <li>谷歌</li>
        <li>雅虎</li>
        <li>新浪</li>
    </ul>
</div>

<script>
    $('.select').on('click', '.placeholder', function(e) {
        var parent = $(this).closest('.select');
        if (!parent.hasClass('is-open')) {
            parent.addClass('is-open');
            $('.select.is-open').not(parent).removeClass('is-open');
        } else {
            parent.removeClass('is-open');
        }
        e.stopPropagation();
    }).on('click', 'ul>li', function() {
        var parent = $(this).closest('.select');
        parent.removeClass('is-open').find('.placeholder').text($(this).text());
    });

    $('body').on('click', function() {
        $('.select.is-open').removeClass('is-open');
    });
</script>