Vorrei avere un campo di input in cui gli utenti possono inserire un valore di testo personalizzato o scegliere dal menu a discesa. Un normale <select>offre solo opzioni a discesa.
Come posso impostare un <select>valore personalizzato di accettazione? Ad esempio: Ford?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Risposte:
HTML5 ha una casella combinata incorporata. Crei un testo inpute un file datalist. Quindi aggiungi un listattributo a input, con un valore di iddi datalist.
Aggiornamento: a partire da marzo 2019 tutti i principali browser (ora inclusi Safari 12.1 e iOS Safari 12.3) supportano datalistil livello necessario per questa funzionalità. Vedere caniuse per il supporto dettagliato del browser.
Assomiglia a questo:
<input type="text" list="cars" />
<datalist id="cars">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</datalist><input type="text" list="cars" style="background:url('images/arrow_down.png') no-repeat right center">
L'ultimo JSFiddle di Alen Saqe non si è attivato per me su Firefox, quindi ho pensato di fornire una semplice soluzione html / javascript che funzionerà bene all'interno dei moduli (per quanto riguarda l'invio) fino al giorno in cui il tag datalist sarà accettato da tutti i browser / dispositivi. Per maggiori dettagli e vederlo in azione, vai su: http://jsfiddle.net/6nq7w/4/ Nota: non consentire spazi tra fratelli e sorelle!
<!DOCTYPE html>
<html>
<script>
function toggleField(hideObj,showObj){
hideObj.disabled=true;
hideObj.style.display='none';
showObj.disabled=false;
showObj.style.display='inline';
showObj.focus();
}
</script>
<body>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser"
onchange="if(this.options[this.selectedIndex].value=='customOption'){
toggleField(this,this.nextSibling);
this.selectedIndex='0';
}">
<option></option>
<option value="customOption">[type a custom value]</option>
<option>Chrome</option>
<option>Firefox</option>
<option>Internet Explorer</option>
<option>Opera</option>
<option>Safari</option>
</select><input name="browser" style="display:none;" disabled="disabled"
onblur="if(this.value==''){toggleField(this,this.previousSibling);}">
<input type="submit" value="Submit">
</form>
</body>
</html>
jQuery Solution!
Demo: http://jsfiddle.net/69wP6/2/
Un'altra demo qui sotto (aggiornata!)
Avevo bisogno di qualcosa di simile in un caso in cui avevo alcune opzioni fisse e volevo che un'altra opzione fosse modificabile! In questo caso ho creato un input nascosto che si sarebbe sovrapposto all'opzione di selezione e sarebbe stato modificabile e utilizzato jQuery per far funzionare tutto senza problemi.
Condivido il violino con tutti voi!
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();
}
});
Modifica: aggiunti alcuni semplici tocchi di design, in modo che le persone possano vedere chiaramente dove finisce l'input!
JS Fiddle: http://jsfiddle.net/69wP6/4/
Non puoi davvero. Dovrai avere sia il menu a discesa che la casella di testo e fargli scegliere o compilare il modulo. Senza javascript potresti creare un set di pulsanti radio separato in cui scelgono il menu a discesa o l'immissione di testo, ma questo mi sembra disordinato. Con alcuni javascript potresti disattivare l'uno o l'altro a seconda di quale scelgono, ad esempio, avere un'opzione "altro" nel menu a discesa che attiva il campo di testo.
Se l'opzione datalist non soddisfa i tuoi requisiti, dai un'occhiata alla libreria Select2 e alla " Creazione dell'opzione dinamica "
$(".js-example-tags").select2({
tags: true
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control js-example-tags">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>Utilizzando una delle soluzioni di cui sopra (@mickmackusa), ho realizzato un prototipo funzionante in React 16.8+ usando Hooks.
https://codesandbox.io/s/heuristic-dewdney-0h2y2
Spero che aiuti qualcuno.