Bueno, si alguien esta buscando algo parecido, aquí les tengo un script que acabo de crear:
http://jsfiddle.net/6Tt2N/8/
html
Código HTML:
<select name="categories" class="category">
<option value="none">no category</option>
<option value="1">general</option>
<option value="2">technology</option>
<option value="3">medicine</option>
<option value="4">economic</option>
</select>
javascript (usando jquery)
Código PHP:
/* detecting the changes*/
var selector = ".category";
$("select" + selector).change(function () {
$("#write_sel").trigger("click");
$("#write_sel").val($(selector + " option:selected").text());
$(selector + " option:selected").text("");
$("#write_sel").css("opacity", 1);
});
/*Create the selector input field*/
$("select" + selector).parent().append("<input type='text' name='new' id='write_sel' placeholder=''>");
var position = $("select" + selector).position();
$("#write_sel").css("width", $("select" + selector).width() - 20);
$("#write_sel").css("height", $("select" + selector).height());
$("#write_sel").css("padding", $("select" + selector).css("padding"));
$("#write_sel").css("position", "absolute");
$("#write_sel").css("top", position.top + 1);
$("#write_sel").css("left", position.left + 1);
$("#write_sel").css("background", "transparent");
$("#write_sel").css("font-size", $("select" + selector).css("font-size"));
$("#write_sel").css("padding-left", "7px");
$("#write_sel").css("border", "0");
$("#write_sel").css("outline", "none");
$("#write_sel").attr("placeholder", $(selector + " option").first().text());
$(selector + " option").first().text("");
//console.log($(selector + " option").first().text());
/*Making sure the editor is only activated when double clicking*/
var DELAY = 200,
clicks = 0,
timer = null;
$("#write_sel").click(function (e) {
// if()
if ($(selector + " option:selected").val() != $("select" + selector + " option").first().val()) {
clicks++; //count clicks
if (clicks === 1) {
timer = setTimeout(function () {
$("#write_sel").blur(); //do nothing
clicks = 0; //after action performed, reset counter
}, DELAY);
} else {
clearTimeout(timer); //prevent single-click action
$(selector + " option:selected").text("");
$(this).css("opacity", 1);
clicks = 0; //after action performed, reset counter
}
}
}).dblclick(function (e) {
e.preventDefault(); //cancel system double-click event
});
/*Returning the variable to the corresponding option*/
$("#write_sel").blur(function () {
$(selector + " option:selected").text($(this).val());
if ($(this).val() != '') {
$(this).css("opacity", 0);
}
});
css
Código:
category {
width:200px;
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: #555;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #555;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #555;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #555;
}