可编辑'选择'元素

Question

我想在表单中有一个选择元素，但除了下拉列表中的选项之外，能够编辑它并添加新选项但不与其他输入文本相关会很有用，我需要全部一次。可能吗？

Answer 1

没有什么是不可能的。下面是一个解决方案，只要设置<select>的值就可以设置文本输入的值：Demo on JSFiddle
渲染已在Firefox和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> 

您也可以与输入list属性和<datalist> element为此在HTML5：

<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> 

Answer 2

类似上述回答，但没有绝对定位：

<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;"/> 

因此，创建一个输入并将其放在组合框的顶部

Answer 3

基于其他的答案，这里是与淘汰赛使用第一稿：

使用

 <div data-bind="editableSelect: {options: optionsObservable, value: nameObservable}"></div> 

淘汰赛数据绑定

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'); 
     } 
    } 
    }); 

查看

<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"/> 

视图模型

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); 
}