Phần tử 'Chọn' có thể chỉnh sửa

Question

Tôi muốn có phần tử chọn trong biểu mẫu nhưng ngoài các tùy chọn trong trình đơn thả xuống, sẽ hữu ích khi có thể chỉnh sửa và thêm tùy chọn mới nhưng không phải với văn bản nhập khác, tôi cần tất cả cùng một lúc. Có thể không?

Answer 1

Không có gì là không thể. Đây là giải pháp đơn giản đặt giá trị của một đầu vào văn bản bất cứ khi nào giá trị của các thay đổi <select>: Demo on JSFiddle
Hiển thị đã được thử nghiệm trên Firefox và 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> 

Bạn cũng có thể làm điều này trong HTML5 với đầu vào list thuộc tính và <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> 

Answer 2

tương tự để trả lời ở trên nhưng không có vị trí tuyệt đối:

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

Vì vậy, tạo một đầu vào và đặt nó lên trên cùng của hộp tổ hợp

Answer 3

Dựa trên câu trả lời khác, đây là một dự thảo đầu tiên để sử dụng với loại trực tiếp:

Cách sử dụng

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

dữ liệu Knockout ràng buộc

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

Xem

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

ViewModel

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