Jquery-选择和输入框组合

我试图做一个组合选择框和文本输入。以下是我希望它能够工作的方式

用户看到旧值

单击旧值将提供一个组合文本框，然后选择下拉框

用户可以输入文本或选择一个选项

选择的值将成为新值

我已经做了大部分，你可以在这里看到

然而，当有人专注于输入时，他们无法在不失去对整个事情的专注并“重新开始”的情况下进入下拉框。反之亦然。我希望用户能够在两者之间来回切换，而不会失去焦点。这可能吗

我认为我遇到的问题就在这一部分：

$(".whileloopflagvalue").live("click", function(event) {
    $(this).hide();             
    $(this).parent().find('.whileloopflagselect').show();               
    $(this).parent().find('.whileloopflaginput').show();        
});


$(".whileloopflagselect, .whileloopflaginput").live("focusout", function(event) 
{   
    $(this).parent().find('.whileloopflagselect').hide();               
    $(this).parent().find('.whileloopflaginput').hide();
    var temp=$(this).parent().find('.whileloopflaginput').attr("value");
    if (temp.length==0) { temp=1; }
    $(this).parent().find('.whileloopflagvalue').html(temp);
    $(this).parent().find('.whileloopflagvalue').show();    
}); 

---

这是一段时间以来我想弄明白的最酷的事情之一

我先将您的代码更改为不再使用

live

，因为它已贬值

我将所有事件处理程序添加到documentready函数中的

文档

；必要时授权

然后我必须创建一个标志来判断输入是否脏。如果是，新聚焦的元素不是select，反之亦然，那么我允许它设置值并隐藏字段

:

因此，如果您在文本框中输入值或在下拉列表中选择值，只要您选择的下一个元素是这两个元素中的一个，就可以在它们之间随意移动

丢失焦点处理程序中的

setTimeout

原因是允许浏览器有时间触发

focusin

事件。如果不这样做，就无法知道在两个控件之一失去焦点后哪个元素获得了焦点

---

唯一奇怪的是，如果你不做任何改变，它就不会隐藏。如果单击div，您必须更改某些内容。

这是我最近尝试解决的最酷的问题之一

我先将您的代码更改为不再使用

live

，因为它已贬值

我将所有事件处理程序添加到documentready函数中的

文档

；必要时授权

然后我必须创建一个标志来判断输入是否脏。如果是，新聚焦的元素不是select，反之亦然，那么我允许它设置值并隐藏字段

:

因此，如果您在文本框中输入值或在下拉列表中选择值，只要您选择的下一个元素是这两个元素中的一个，就可以在它们之间随意移动

丢失焦点处理程序中的

setTimeout

原因是允许浏览器有时间触发

focusin

事件。如果不这样做，就无法知道在两个控件之一失去焦点后哪个元素获得了焦点

---

唯一奇怪的是，如果你不做任何改变，它就不会隐藏。如果单击div，您必须更改某些内容。

谢谢您的帮助。谢谢您的帮助。

$(document).ready(function () {
    var oldValue = $('whileloopflagvalue');
    
    $(document).find('.whileloopflagselect').hide();
    $(document).find('.whileloopflaginput').hide();    

    $(document).on('focusin',function(event){
        var theTarget = $(event.target);
        var theInput = theTarget.parent().find('.whileloopflaginput');
        var theSelect = theTarget.parent().find('.whileloopflagselect');
        
        if(theInput.length > 0){
            if(theTarget[0] == theInput[0] || theTarget[0] == theSelect[0]){
                theInput.removeAttr('data-dirty');
            }
        }
        
    });
    
    $(document).on("focusout", function (event) {   
        var theTarget = $(event.target);
        var theInput = theTarget.parent().find('.whileloopflaginput');
        var theSelect = theTarget.parent().find('.whileloopflagselect');
        setTimeout(function(){
            if (theTarget[0] == theInput[0] || theTarget[0] == theSelect[0] ) {
                if(theInput.attr('data-dirty') == 'dirty'){
                    theTarget.parent().find('.whileloopflagvalue').text(theInput.val());
                    theInput.hide();
                    theSelect.hide();
                    theTarget.parent().find('.whileloopflagvalue').show();
                    theInput.removeAttr('dirty');
                }  
            }
        }, 50);
    });

    $(document).on("click",".whileloopflagvalue", function (event) {
        oldValue = $(this).text();
        $(this).hide();
        $(this).parent().find('.whileloopflagselect').show();
        $(this).parent().find('.whileloopflaginput').show().focus();
    });
    
    $(document).on('change','.whileloopflagselect', function () {
        var temp = $(this).attr("id");
        $(this).parent().find(".whileloopflaginput").val($('#' + temp).find(":selected").text());
        $(this).parent().find(".whileloopflaginput").attr('data-dirty','dirty');
        $("#" + temp).val("").attr('selected', true);
    });
    
    $(document).on('input propertychange','.whileloopflaginput',function(){
        $(this).attr('data-dirty','dirty');
    });

});