0

但是，如果我改变主意并且不想编辑下拉列表，它只会在编辑模式下停留在那里。我无法让它关闭。每当我单击页面上的其他任何位置时，我都试图让它消失。

我真的不希望它滑动思想，现在它只是在双击文本时出现在文本的位置。我只是希望它像下面的 jsfiddle 一样消失。

与此类似的东西：

http://jsfiddle.net/TEyHC/10/

这是我的代码：

简单的 html 下拉选择：

<td class="edit">
<select class="touch" style="display: none;">
<option value="13">opers</option>
<option value="1">Customer Service</option>
<option value="2">DC</option>
<option value="3">Ecommerce</option>
<option value="4">Finance/Accounting</option>
<option value="5">Human Resources</option>
<option value="6">Inbound Logistics</option>
<option value="7">Information Systems</option>
<option value="14">Management</option>
<option value="8">Marketing</option>
<option value="9">Merchandising</option>
<option value="10">Property</option>
<option value="11">Rebuying</option>
<option value="12">Sales</option>
</select>
<span class="look">DC</span>
</td>

<td class="editing" data-oldvalue="13">
<select class="touch" style="display: inline-block;">
<option value="13">opers</option>
<option value="1">Customer Service</option>
<option value="2" selected="selected">DC</option>
<option value="3">Ecommerce</option>
<option value="4">Finance/Accounting</option>
<option value="5">Human Resources</option>
<option value="6">Inbound Logistics</option>
<option value="7">Information Systems</option>
<option value="14">Management</option>
<option value="8">Marketing</option>
<option value="9">Merchandising</option>
<option value="10">Property</option>
<option value="11">Rebuying</option>
<option value="12">Sales</option>
</select>
<span class="look" style="display: none;">DC</span>
</td>

jQuery函数：

function back_to_look() {
    $('td.editing ,td.edit.new').each(function() {
        $(this).children('.look').show();
        $(this).children('.touch').hide();
        if (!$(this).hasClass('edit')) {
            $(this).addClass('edit');
        }
        if ($(this).hasClass('editing')) {
            $(this).removeClass('editing');
        }
    });
}

function td_to_touch(td) {
    var theTouch = td.children('.touch');
    var theLook = td.children('.look');
    var oldVal = theLook.text().trim();

    td.addClass('editing');
    td.removeClass('edit');
    theLook.hide();
    theTouch.show();

    //save the existing value so it can be compared to when the "change" event is fired on the element
    td.attr('data-oldvalue', theTouch.val());

    if (theTouch.is('select')) {        
        theTouch.children('option:contains(' + oldVal + ')').attr('selected', 'selected');
    } else {
        theTouch.val(oldVal);
    }
}


$('td.edit' + suffix).dblclick(function(event) {
        //make this the only TD in "editing" mode
        event.preventDefault();
        back_to_look();        
        td_to_touch($(this));
    });




String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};

var myTextExtraction = function(node)  
{
    var elem = $(node);
    var theVal = null;

    if (elem.hasClass('edit')) {
        elem.children().each(function() {
            if ($(this).css('display') != 'none') {
                theVal = $(this).val();
            }
        });

    } else {
        theVal = elem.text();
    }

    console.log(theVal);

/*
    var c = node.childNodes.length;

    if (c == 1) {
        theVal = node.innerHTML.trim();
    } else if (c == 5) {
        theVal = node.childNodes[3].innerHTML.trim();
    }

    //console.log(theVal);
    return theVal;
*/
}

任何帮助将不胜感激。

4

0 回答 0