【发布时间】：2015-01-18 20:15:15
【问题描述】：
我正在尝试使用相邻的下拉列表创建一个输入字段，其想法是输入字段可以接受用户输入的文本或从下拉列表中选择的值。为了使事情尽可能简单，我使用样式在输入有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>
任何建议将不胜感激！！！
这是代码的一个小提琴，我删除了引导资产：
【问题讨论】：
标签： jquery css forms event-handling css-selectors