jQuery-双击类显示下拉列表以选择

Question

I am having major trouble with this.

I am trying to write something in jQuery, when text is double clicked it hides that element and shows a select drop down... However, when the user leaves that element, the drop down should go back to the original text.

I have tried so many methods, and none work. I tried using dblclick with hover, etc.

In a short recap, user clicks div with text. Div is hidden select is shown. Users mouse leaves area, drop down is hidden, div is shown again.

Thanks for the help, I have been playing with this for far too many hours!

Answer 1

Something like this doesn't work for you?

HTML:

​<div>
    <span>TEXT TEXT TEXT</span>
    <select>
        <option>1</option>
        <option>2</option>
    </select>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

span {
    cursor: default;
}

select {
    display: none;
}​

JS:

$('div').dblclick(function() {
    $('span').hide();
    $('select').show();
}).mouseleave(function() {
    $('span').show();
    $('select').hide();
});​

Alternative JS:

$('div').dblclick(function() {
    $('span').hide();
    $('select').show();
});
$('select').mouseleave(function() {
    $('span').show();
    $('select').hide();
});​

The first JS will make the select box disappear when you move outside the bounds of the div (which are set by the size of the span text that was hidden). The second will will make the select box disappear once you've moused inside and then mouse out. If you'd prefer, you could change it from .mouseleave() to .change() and then it will only hide the select box when someone actually selects something.

JSFiddle