Me gustaría tener un elemento seleccionado en el formulario, pero además de las opciones en el menú desplegable, sería útil poder editarlo y agregar una nueva opción pero no con otro texto de entrada, lo necesito todo en una vez ¿Es posible?Elemento 'Seleccionado' Editable
Respuesta
Nada es imposible. Aquí hay una solución que simplemente establece el valor de una entrada de texto cada vez que cambia el valor de <select>
: Demo on JSFiddle
La reproducción se ha probado en Firefox y Google Chrome.
<style>
.select-editable { position:relative; background-color:white; border:solid grey 1px; width:120px; height:18px; }
.select-editable select { position:absolute; top:0px; left:0px; font-size:14px; border:none; width:120px; margin:0; }
.select-editable input { position:absolute; top:0px; left:0px; width:100px; padding:1px; font-size:12px; border:none; }
.select-editable select:focus, .select-editable input:focus { outline:none; }
</style>
<div class="select-editable">
<select onchange="this.nextElementSibling.value=this.value">
<option value=""></option>
<option value="115x175 mm">115x175 mm</option>
<option value="120x160 mm">120x160 mm</option>
<option value="120x287 mm">120x287 mm</option>
</select>
<input type="text" name="format" value=""/>
</div>
También puede hacer esto en HTML5 con la entrada list
atributo y <datalist>
element:
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
¿No debería haber una etiqueta de cierre para ese elemento de entrada? –
Simplemente cambie '>' a '/>' en '' que es ''. – Jamie
de entrada es un elemento nulo, y como tal no debe (según doctype) tener una etiqueta de cierre (ya que no puede tener contenido) http://www.w3.org/html/wg/drafts/html/master/syntax. html # void-elements – Patrick
similares para responder a la anterior pero sin el posicionamiento absoluto:
<select style="width: 200px; float: left;" onchange="this.nextElementSibling.value=this.value">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input style="width: 185px; margin-left: -199px; margin-top: 1px; border: none; float: left;"/>
Por lo tanto crear una entrada cuadro y ponerlo en la parte superior del cuadro combinado
Es más simple gracias. @camster –
Sobre la base de las otras respuestas, aquí es un primer borrador para el uso con el golpe de gracia:
Uso
<div data-bind="editableSelect: {options: optionsObservable, value: nameObservable}"></div>
enlace de datos Knockout
composition.addBindingHandler('editableSelect',
{
init: function(hostElement, valueAccessor) {
var optionsObservable = getOptionsObservable();
var valueObservable = getValueObservable();
var $editableSelect = $(hostElement);
$editableSelect.addClass('select-editable');
var editableSelect = $editableSelect[0];
var viewModel = new editableSelectViewModel(optionsObservable, valueObservable);
ko.applyBindingsToNode(editableSelect, { compose: viewModel });
//tell knockout to not apply bindings twice
return { controlsDescendantBindings: true };
function getOptionsObservable() {
var accessor = valueAccessor();
return getAttribute(accessor, 'options');
}
function getValueObservable() {
var accessor = valueAccessor();
return getAttribute(accessor, 'value');
}
}
});
Ver
<select
data-bind="options: options, event:{ focus: resetComboBoxValue, change: setTextFieldValue} "
id="comboBox"
></select>
<input
data-bind="value: value, , event:{ focus: textFieldGotFocus, focusout: textFieldLostFocus}"
id="textField"
type="text"/>
modelo de vista
define([
'lodash',
'services/errorHandler'
], function(
_,
errorhandler
) {
var viewModel = function(optionsObservable, valueObservable) {
var self = this;
self.options = optionsObservable();
self.value = valueObservable;
self.resetComboBoxValue = resetComboBoxValue;
self.setTextFieldValue = setTextFieldValue;
self.textFieldGotFocus = textFieldGotFocus;
self.textFieldLostFocus = textFieldLostFocus;
function resetComboBoxValue() {
$('#comboBox').val(null);
}
function setTextFieldValue() {
var selection = $('#comboBox').val();
self.value(selection);
}
function textFieldGotFocus() {
$('#comboBox').addClass('select-editable-input-focus');
}
function textFieldLostFocus() {
$('#comboBox').removeClass('select-editable-input-focus');
}
};
errorhandler.includeIn(viewModel);
return viewModel;
});
CSS
.select-editable {
display: block;
width: 100%;
height: 31px;
padding: 6px 12px;
font-size: 12px;
line-height: 1.42857143;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;padding: 0;
}
.select-editable select {
outline:0;
padding-left: 10px;
border:none;
width:100%;
height: 29px;
}
.select-editable input {
outline:0;
position: relative;
top: -27px;
margin-left: 10px;
width:90%;
height: 25px;
border:none;
}
.select-editable select:focus {
outline:0;
border: 1px solid #66afe9;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.select-editable input:focus {
outline:0;
}
.select-editable-input-focus {
outline:0;
border: 1px solid #66afe9 !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
- 1. Color de fondo del elemento seleccionado en un editable JComboBox
- 2. ASP.Net Html.DropDownList Elemento seleccionado no seleccionado
- 3. Obtener elemento seleccionado tipo
- 4. Html.DropDownList ajuste del elemento seleccionado
- 5. Eliminar elemento seleccionado de JList
- 6. Recuperando el elemento seleccionado de la ruleta?
- 7. Android: Vista en lista Elemento seleccionado -1
- 8. Java JList desplazarse al elemento seleccionado
- 9. SublimeText - ¿Deseleccionar el último elemento incrementalmente seleccionado?
- 10. WP7 toolkit: Gestos en ListBox - elemento seleccionado
- 11. Obteniendo el elemento seleccionado actualmente en QTreeView
- 12. Establecer el elemento desplegable seleccionado MVC
- 13. ¿Cómo resaltar el elemento seleccionado en ItemsControl?
- 14. android listview obtener el elemento seleccionado
- 15. ¿Cómo obtener el elemento seleccionado de ListView?
- 16. WPF TreeView goteando el elemento seleccionado
- 17. DBLookupComboBox - ¿Cómo borrar el elemento seleccionado?
- 18. DropdownList de ASP.net sin elemento seleccionado
- 19. conjunto seleccionado elemento en una DataGridViewComboBoxColumn
- 20. ¿Cómo resaltar el elemento seleccionado en ListView?
- 21. Descartar ventana emergente cuando RadioGroup Elemento seleccionado
- 22. Resalte el elemento seleccionado en "ListFragment"?
- 23. Contenido editable de enlace personalizado editable
- 24. WPF Editable ComboBox
- 25. editable JComboBox
- 26. ComboBox editable
- 27. Editable ListView
- 28. En un cuadro combinado, ¿cómo determino el elemento resaltado (elemento no seleccionado)?
- 29. Cómo alternar un UILabel entre editable y no editable
- 30. MVC DropDownListFor() El elemento seleccionado no está seleccionado/requerido La validación no se ejecutó
Un desplegable editable también se llama un "cuadro combinado". Ahora conoces una nueva palabra clave google :) – BalusC
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxcombobox/jquery-combobox-getting-started.htm –
Posible duplicado de [cuadro combinado HTML con la opción de escriba una entrada] (http://stackoverflow.com/questions/14614702/html-combo-box-with-option-to-type-an-entry) –