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 db吗？

Answer 1

是的，您可以在表单元素中的输入标记中使用onblur / onchange事件..

Answer 2

你的情况有点棘手，从我看到你别无选择，只能处理文档的全局click事件，因为blur并没有真正按预期的下拉元素工作我的测试。

因此，在全局点击事件中，启动一个重置值的计时器，并在下拉菜单的单击事件中及其父单元取消计时器，以便用户仍然可以选择。

您必须添加的代码是：

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

修改：为了隐藏之前打开的下拉列表，您需要在点击事件中执行此操作：

$(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

如何摆脱功能

2 个答案: