Question

我正在尝试使用相邻的下拉列表创建输入字段，其想法是输入字段可以接受用户输入的文本或从下拉列表中选择的值。为了使事情变得尽可能简单，当输入有focus然后显示下拉列表时，我使用样式排队。问题是当单击一个项目时，输入失去焦点，下拉消失，无法检测到点击操作。

有一个简单的方法吗？理想情况下，我想保持他们的方式我想知道更多，如果有不同的方式，我可以听取点击填充表单字段？代码如下：

<!doctype html>
<html>
<head>
<title>jQuery editable select</title>

<link rel="stylesheet" href="css/bootstrap.min.css" />

<style>
.wrap { width: 1024px; margin: 0 auto; }
    .left { width: 600px; float: left; }
    .right { width: 400px; float: right; }

.editable-select-wrap {}
    .editable-input {}
        .editable-input:focus + .editable-drop { display: block; }
    .editable-drop { list-style: none; padding: 0; margin: 0; border: 1px solid #eee; display: none; }
        .editable-drop.focus { display: block; }
        .editable-drop li { display: block; padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; }
            .editable-drop li:last-child { border-bottom: none; }
</style>

</head>
<body>

<div class="wrap">

    <div class="left">

        <span class="editable-select" data-name="phone" data-options='[{"val" : "1","text" : "Option 1"}, {"val" : "2","text" : "Option 2"}]'></span>

    </div>
    <div class="right">

        <span class="editable-select" data-name="message" data-options='[{"val" : "1","text" : "Option 1"}, {"val" : "2","text" : "Option 2"}]'></span>

    </div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
( function ( $ ) {

    $.fn.editableSelect = function( options ) {

        /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
        %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    Configuration Settings    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
        %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
        var config = $.extend({
            bootstrap: false,
            classDefault : 'editable-input',
            classbootstrap: 'form-control'
        }, options );

        var html = classes = '', json;

        if( config.bootstrap ) {
            classes = config.classbootstrap +' '+ config.classDefault;
        } else {
            classes = config.classDefault;
        }

        $( this ).each( function() {

            html = '';

            html = '<div class="editable-select-wrap">';
                html += '<input type="text" name="'+ $( this ).data('name') +'" class="'+ classes +'" />';
                html += '<ul class="editable-drop">';

            json = $( this ).data('options' );

            $( json ).each( function() {
                html += '<li data-value="'+ this.val +'">'+ this.text +'</li>';
            });

            html += '</ul></div>';

            $( this ).html( html );
        });

        var parent;

        $('body').on('click', '.editable-drop li', function() {
console.log( 'fire' );
            parent = $( this ).parent();

            parent.siblings('input').val( $( this ).text() );

            parent.css('display', 'none');

        });

    };

}) ( jQuery );

$('.editable-select').editableSelect({ bootstrap: true });
</script>

</body>
</html>

任何建议都将非常感谢!!!

这是代码的小提琴，我删除了bootstrap资产：

http://jsfiddle.net/godoploid/m6sdgyr1/1/

Answer 1

我通过向hover

添加editable-drop找到了解决方法

.editable-drop:hover {
    display:block;
}

使用JSFiddle：http://jsfiddle.net/xL1kbfne/1/

或下面的代码片段：

( function ( $ ) {

    $.fn.editableSelect = function( options ) {

        /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
        %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%    Configuration Settings    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
        %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
        var config = $.extend({
            bootstrap: false,
            classDefault : 'editable-input',
            classbootstrap: 'form-control'
        }, options );

        var html = classes = '', json;

        if( config.bootstrap ) {
            classes = config.classbootstrap +' '+ config.classDefault;
        } else {
            classes = config.classDefault;
        }

        $( this ).each( function() {

            html = '';

            html = '<div class="editable-select-wrap">';
                html += '<input type="text" name="'+ $( this ).data('name') +'" class="'+ classes +'" />';
                html += '<ul class="editable-drop">';

            json = $( this ).data('options' );

            $( json ).each( function() {
                html += '<li data-value="'+ this.val +'">'+ this.text +'</li>';
            });

            html += '</ul></div>';

            $( this ).html( html );
        });

        var parent;

        $('body').on('click', '.editable-drop li', function() {
console.log( 'fire' );
            parent = $( this ).parent();

            parent.siblings('input').val( $( this ).text() );

            parent.css('display', 'none');

        });

    };

}) ( jQuery );

$('.editable-select').editableSelect({ bootstrap: true });

.wrap { width: 1024px; margin: 0 auto; }
    .left { width: 600px; float: left; }
    .right { width: 400px; float: right; }

.editable-select-wrap {}
    .editable-input {}
        .editable-input:focus + .editable-drop { display: block; }
    .editable-drop { list-style: none; padding: 0; margin: 0; border: 1px solid #eee; display: none; }
        .editable-drop.focus { display: block; }
        .editable-drop li { display: block; padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; }
            .editable-drop li:last-child { border-bottom: none; }

    .editable-drop:hover {
        display:block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">

    <div class="left">

        <span class="editable-select" data-name="phone" data-options='[{"val" : "1","text" : "Option 1"}, {"val" : "2","text" : "Option 2"}]'></span>

    </div>
    <div class="right">

        <span class="editable-select" data-name="message" data-options='[{"val" : "1","text" : "Option 1"}, {"val" : "2","text" : "Option 2"}]'></span>

    </div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

元素的jQuery onfocus具有可单击的另一个元素

1 个答案: