Как сделать onblur, чтобы выбраться из функции

Question

У меня есть следующий код, который отлично работает, но мне нужен оператор onblur, если пользователь нажимает кнопку в раскрывающемся списке, поэтому возвращает его в исходное состояние, но попытался реализовать это и не знаю, с чего начать.

вот код:

<script> 
$(document).ready(function(){ 
    var choices = "<select class='choices'>" 
        +"<option value='Choice 1'>Choice 1</option>" 
        +"<option value='Choice 2'>Choice 2</option>" 
        +"<option value='Choice 3'>Choice 3</option>" 
        +"<option value='Choice 4'>Choice 4</option>" 
        +"</select>"; 

    $(".update").click(function() { 
    var $this = $(this), 
     currentChoice; 
    // don't continue if there's already a select in this cell 
    if ($this.find("select").length != 0) 
     return; 
    currentChoice = $this.html(); 
    var $choices = $(choices); 
    $this.empty().append($choices); 
    $choices.val(currentChoice); 
    }); 

    $(document).on("change", ".choices", function() { 
    var $this = $(this); 
    $this.parent().html($this.val()); 
    return false; 
    }); 
}); 
</script> 

<table id="list"> 
    <tr> 
     <td>Film Name 1</td> 
     <td class="update">Choice 1</td> 
    </tr> 
    <tr> 
     <td>File Name 2</td> 
     <td class="update">Choice 3</td> 
    </tr> 
    <!-- etc --> 
</table> 

Кроме того, я могу затем использовать onchange="this.form.submit();" представить изменения в моей БД MySQL?

Answer 1

Ваше дело немного сложнее, от того, что я видел, у вас нет выбора, кроме как справиться с глобальным click событием документ, так как blur не работает должным образом для элемента drop в моих тестах.

Таким образом, при глобальном событии клика таймер, который сбросит значение, и в событии клика самого выпадающего списка и его родительской ячейки отменит таймер, чтобы пользователь все еще мог выбрать.

код нужно добавить это:

var _timer = 0;  

$(document).on("click", ".choices, .update", function() { 
    window.clearTimeout(_timer); 
    return false; 
}); 

$(document).click(function() { 
    _timer = window.setTimeout(function() { 
     var oDDL = $(".choices"); 
     if (oDDL.length > 0) 
      oDDL.parent().html(oDDL.val()); 
    }, 50); 
}); 

Live test case.

Edit: для того, чтобы скрыть ранее открытые выпадающие списки, что вам нужно сделать, чтобы в случае щелчка:

$(document).on("click", ".choices, .update", function() { 
    window.clearTimeout(_timer); 
    var curDDL = $(this); 
    $(".choices").each(function() { 
     if (this !== curDDL.get(0) && this !== curDDL.find("select").get(0)) 
      $(this).parent().html($(this).val()); 
    }); 
    return false; 
}); 

Updated jsFiddle.

Answer 2

Да, вы можете использовать ONBLUR/OnChange событие ввода тегов .. в виде элемента ..