我正在尝试制作一个带有相邻下拉列表的输入字段，其想法是输入字段可以接受用户输入的文本或从下拉列表中选择的值。为了使事情尽可能简单，我使用样式在输入具有 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>
如有任何建议，我们将不胜感激!!!
这是代码的 fiddle ，我删除了引导 Assets :
最佳答案
我通过向 editable-drop 添加 hover 找到了解决此问题的方法
.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 有另一个元素可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27048570/