Düzenlenebilir 'Select' öğesi

Question

Formda bir seçim elemanına sahip olmak istiyorum, ancak açılır menüdeki seçeneklerin yanı sıra, onu düzenlemek ve yeni bir seçenek eklemek için yararlı olabilir, ancak başka bir giriş metni ile değil hepsi bir arada. Mümkün mü?

Answer 1

Hiçbir şey imkansız. Burada, <select> değerinin değiştiği her zaman bir metin girişinin değerini ayarlayan bir çözüm var: Demo on JSFiddle
Rendering, Firefox ve Google Chrome'da test edilmiştir.

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

Ayrıca giriş list özniteliği ve <datalist> element ile HTML5'teki yapabilirsiniz:

<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

yukarıda cevap Benzer

ancak mutlak konumlandırma olmadan:

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

Yani bir giriş oluşturmak kutucuğuna tıklayın ve combobox'ın üstünden geçirin

Answer 3

Diğer yanıtlara göre, burada nakavt ile kullanım için bir ilk taslak geçerli: bağlayıcı

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

Nakavt veri

Kullanımı

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

Görünüm

<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 düzenlenebilir bir açılan aynı zamanda bir "combobox" denir

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