Решение jQuery!
Демо: http://jsfiddle.net/69wP6/2/
Еще одна демонстрация ниже (обновлено!)
Мне нужно было что-то подобное в случае, когда у меня были фиксированные параметры, и я хотел, чтобы еще один параметр был редактируемым! В этом случае я сделал скрытый ввод, который бы перекрывал опцию выбора и был бы редактируемым, и использовал jQuery, чтобы все это работало без проблем.
Я делюсь скрипкой со всеми вами!
HTML
<div id="billdesc">
<select id="test">
<option class="non" value="option1">Option1</option>
<option class="non" value="option2">Option2</option>
<option class="editable" value="other">Other</option>
</select>
<input class="editOption" style="display:none;"></input>
</div>
CSS
body{
background: blue;
}
#billdesc{
padding-top: 50px;
}
#test{
width: 100%;
height: 30px;
}
option {
height: 30px;
line-height: 30px;
}
.editOption{
width: 90%;
height: 24px;
position: relative;
top: -30px
}
JQuery
var initialText = $('.editable').val();
$('.editOption').val(initialText);
$('#test').change(function(){
var selected = $('option:selected', this).attr('class');
var optionText = $('.editable').text();
if(selected == "editable"){
$('.editOption').show();
$('.editOption').keyup(function(){
var editText = $('.editOption').val();
$('.editable').val(editText);
$('.editable').html(editText);
});
}else{
$('.editOption').hide();
}
});
Редактировать:
Добавлено несколько простых штрихов в дизайне, чтобы люди могли ясно видеть, где заканчивается ввод!
JS Fiddle: http://jsfiddle.net/69wP6/4/