HTML pilih formulir dengan opsi untuk memasukkan nilai kustom

108

Saya ingin memiliki kolom input yang dapat digunakan pengguna untuk memasukkan nilai teks kustom atau memilih dari drop down. A regular <select>hanya menawarkan opsi drop down.

Bagaimana saya bisa membuat <select>nilai kustom terima? Misalnya: Ford?

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
html  forms 
— Ib33X
sumber
Anda dapat menggunakan javascript untuk secara dinamis menambahkan opsi untuk memilih tetapi kemudian menggunakan informasi ini akan menjadi sakit yang nyata.
— David
Saya tidak menambahkan opsi itu untuk nilai kustom di situs web saya finnmglas.com/contact, namun seseorang menghubungi saya dengan nilai kustom. Itu sangat aneh
— finnmglas

Jawaban:

261

HTML5 memiliki kotak kombo built-in. Anda membuat teks inputdan a datalist. Kemudian Anda menambahkan listatribut ke input, dengan nilai iddari datalist.

Pembaruan: Mulai Maret 2019 semua browser utama (sekarang termasuk Safari 12.1 dan iOS Safari 12.3) mendukung datalistke tingkat yang diperlukan untuk fungsionalitas ini. Lihat caniuse untuk dukungan browser mendetail.

Ini terlihat seperti ini:

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>
Luaskan cuplikan

— Dmitry
sumber
3
Fitur ini hanya didukung oleh sekitar 50% browser. Hanya firefox, chrome dan opera terbaru yang mendukung ini; IE, Safari, dan browser seluler tidak. Lihat http://caniuse.com/
— markmarijnissen
2
Ini setengah jalan hingga 2016 (lebih dari 2 tahun kemudian), dan sebagian besar browser masih belum mendukung sepenuhnya, setidaknya tanpa bug yang signifikan. Setidaknya sesuatu akan berfungsi pada versi terbaru dari hampir semua hal kecuali Safari / Safari iOS, tetapi Anda harus menguji untuk memastikan bahwa kasus penggunaan Anda berfungsi dengan baik. Itu masih jawaban terbaik.
— Michael Gaskill
1
Ini bekerja dengan baik untuk saya. Dalam banyak kasus, kami tidak perlu mendukung browser lama. Saya hanya menambahkan gambar "panah bawah" di latar belakang bidang masukan untuk memberi petunjuk kepada pengguna bahwa ini dapat diperluas. Kode (Anda memerlukan file gambar sebenarnya):<input type="text" list="cars" style="background:url('images/arrow_down.png') no-repeat right center">
— Eugene Kardash
4
Saya baru saja menguji di versi terbaru IE, Firefox dan Chrome dengan semuanya berfungsi dengan baik. Saya pikir ini adalah solusi sederhana yang bagus untuk masalah umum ini untuk banyak kasus.
— kerl
3
Saya benar-benar ingin menggunakan ini tetapi saya perlu menetapkan nilai default. Pengguna hanya melihat default di drop-down vs. semua opsi (karena disaring). Mereka perlu mengetahui untuk mengosongkan kolom input sebelum melihat semua opsi.
— Justin
27

JSFiddle terbaru Alen Saqe tidak mengaktifkan saya di Firefox, jadi saya pikir saya akan memberikan solusi html / javascript sederhana yang akan berfungsi dengan baik dalam formulir (terkait pengiriman) hingga hari tag datalist diterima oleh semua browser / perangkat. Untuk lebih jelasnya dan melihatnya beraksi, kunjungi: http://jsfiddle.net/6nq7w/4/ Catatan: Jangan biarkan ada spasi di antara saudara kandung!

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

— mickmackusa.dll
sumber
Saya ingin melewati masalah itu lagi! Firefox versi penyihir tidak didukung di sana! Saya mengujinya dengan beberapa versi yang saya tidak ingat! Pujian!
— Alen Saqe
Saya tidak tahu versi FF yang saya gunakan. Saya baru saja melihat FF34.0 dan saya mendapatkan fungsionalitas sekarang, jadi jangan khawatir. Namun, opsi pengalih default "Lainnya" dapat dihapus. Saat saya menghapus "Lainnya" dengan mengedit nilai, menu drop-down tidak menawarkan nilai intuitif untuk dipilih (untuk mengakses fitur pengeditan). Saya pikir ini tergantung pada preferensi pribadi. Karena panah dropmenu masih ada saat bidang dapat diedit, pengguna mungkin tidak menyadari bahwa bidang dapat diedit. Tidak menggali tentang Anda; hanya beberapa umpan balik. Cuplikan saya juga menganggap penamaan bidang di dalam <form>.
— mickmackusa
Hasil akhir dari skrip + html yang cerdik namun tidak terbaca (bagi saya) ini adalah melampirkan nilai opsi yang dipilih, atau teks yang dimasukkan, ke GET dari halaman yang sama sebagai string kueri. Adakah yang tahu cara mengubah tindakan menjadi POST, jadi saya bisa mengambil nilai dalam file php dan melakukan sesuatu dengannya di sana?
— Han
Saya menyusun skrip ini dengan tujuan khusus agar dapat berperilaku sesuai dengan pengiriman formulir html. Apakah Anda menggunakan metode posting sebagai atribut di tag formulir? @Han jika Anda membuat tautan 3v4l.org dari cuplikan yang terisolasi, saya dapat melihat sekilas dan mungkin memberi saran.
— mickmackusa
1
Wah, apakah saya merasa bodoh. Saya lupa meletakkan metode di tag formulir. Ini berfungsi seperti yang diposting dengan modifikasi yang sangat kecil ini: <form name = "BrowserSurvey" method = "post" action = "/ gotThis.php"> ... Skrip yang indah, mickmackusa. Terima kasih atas petunjuk tindak lanjut Anda!
— Han
16

Solusi jQuery!

Demo: http://jsfiddle.net/69wP6/2/

Demo Lain Di Bawah (diperbarui!)

Saya membutuhkan sesuatu yang serupa dalam kasus ketika saya memiliki beberapa Opsi tetap dan saya ingin satu opsi lain dapat diedit! Dalam hal ini saya membuat input tersembunyi yang akan tumpang tindih dengan opsi pilih dan akan dapat diedit dan menggunakan jQuery untuk membuat semuanya bekerja dengan mulus.

Saya berbagi biola dengan Anda semua!

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

Sunting: Menambahkan beberapa desain sentuhan sederhana yang bijaksana, sehingga orang dapat dengan jelas melihat di mana input berakhir!

JS Fiddle: http://jsfiddle.net/69wP6/4/

— Alen Saqe
sumber
11

Anda tidak bisa. Anda harus memiliki drop down, dan kotak teks, dan meminta mereka memilih atau mengisi formulir. Tanpa javascript Anda dapat membuat satu set tombol radio terpisah di mana mereka memilih dropdown atau input teks, tapi ini tampak berantakan bagi saya. Dengan beberapa javascript, Anda dapat menonaktifkan satu atau lainnya tergantung pada mana yang mereka pilih, misalnya, memiliki opsi 'lainnya' di tarik-turun yang memicu bidang teks.

— Sam
sumber
9

Jika opsi datalist tidak memenuhi persyaratan Anda, lihat pustaka Select2 dan " Pembuatan opsi dinamis "

$(".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>
Luaskan cuplikan

— Sogeking
sumber
0

Menggunakan salah satu solusi di atas (@mickmackusa), saya membuat prototipe yang berfungsi di React 16.8+ menggunakan Hooks.

https://codesandbox.io/s/heuristic-dewdney-0h2y2

Saya harap ini membantu seseorang.

— dano
sumber
Saya merasa terhormat. Saya baru saja memeriksa catatan saya dan ini adalah posting ke-12 yang saya buat di Stack Overflow - terasa seperti jutaan tahun yang lalu.
— mickmackusa
Saya baru saja bermain dengan tautan demo Anda dan sepertinya Anda telah kehilangan efek untuk beralih tanpa batas di antara dua jenis bidang.
— mickmackusa
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.