0

如何将现有的自定义下拉框转换为可编辑的下拉框。是不是可以在drop box所在的地方放一个输入框？是否可以在不加载任何繁重的框架的情况下完成此操作？

这是当前的 HTML 标记：

<html>

<style>
#select_box {
    position: absolute;
    width: 179px;
    clip:rect(2px 197px 19px 2px);
    top: -1px;
    font-size: 9pt;
    font-family: Arial;
}
#select_wrapper { 
    display: block;
    position: relative;
    width: 181px;
    border: 1px solid rgb(128,128,128);
    height: 21px;
    background: #ffffff;
}
</style>


<body>
                <div id="select_wrapper">
                    <select id="select_box">
                            <option value=""></option>
                            <option value="ONE">ONE</option>
                            <option value="TWO">TWO</option>
                            <option value="THREE">THREE</option>
                            <option value="FOUR">FOUR</option>
                            <option value="FIVE">FIVE</option>
                            <option value="SIX">SIX</option>
                    </select>
                </div>
</body>
</html>
4

1 回答 1

0

没有CSS3规范不支持详细编辑标签选择可以使用jQuery Selectbox插件 http://www.bulgaria-web-developers.com/projects/javascript/selectbox/ 很久以前我也遇到过同样的问题），找到了解决方案） http://codepen.io/AntonEssenetial/pen/gGqel

CSS：

.pseselect {
    position: relative; // YOUR CONTAINER STYLE
    padding:;
    height:;
    border:;
    border-radius: ;
    background:;
    box-shadow:;
    font-size:;
    line-height:;
    cursor:;
    transition: .2s ease-in-out;
}

.pseselect::after {
    position: absolute;
    top:
    right:
    display: block;
    width:
    height:
    background: url( YOUR IMG ) center no-repeat;
    content: "";
}

.options {
    position: absolute;  YOUR SLECT STYLE
    z-index: ;
    display: none;
    border: ;
    border-radius: ;
    background: white;
    font-size: 13px;
}

.options > div {
    padding:;   
    font-weight: normal;
    cursor: pointer;
}

.options > div:hover {
    background: #eee;
}

HTML：

<div class="pseudo-select input-a">
  <div class="pseselect">Select</div>
  <div class="options">
     <div class="check" >Select</div>
     <div>Select</div>
     <div>Select</div>
     <div>Select</div>
  </div>
</div>

JavaScript：

(function($) {
    $(document).ready(
        function() {
            $('.pseselect').click(function() {
                $(this).parent().find('.options').fadeIn('fast');
            });
            $('.options').mouseleave(function() {
                $(this).fadeOut('fast');
            });
            $('.options > div').click(function() {
                $(this).closest('.pseudo-select').find('.pseselect').html($(this).html());
                $(this).closest('.pseudo-select').find('input').attr('value', $(this).attr('value'));
                $.each($(this).parent().children('div.check'), function() {
                    $(this).removeClass('check');
                });
                $(this).addClass('check');
                $(this).parent().fadeOut('fast');
            });
        }
    );
})(jQuery);
于 2013-09-19T22:49:33.557 回答