HTML chọn biểu mẫu với tùy chọn để nhập giá trị tùy chỉnh

Question 1

Tôi muốn có một trường nhập liệu mà người dùng có thể nhập giá trị văn bản tùy chỉnh hoặc chọn từ trình đơn thả xuống. Một thông thường <select>chỉ cung cấp các tùy chọn thả xuống.

Làm cách nào để tạo <select>giá trị tùy chỉnh chấp nhận? Ví dụ: Ford?

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Question 2

HTML5 có một hộp tổ hợp được tích hợp sẵn. Bạn tạo một văn bản inputvà một datalist. Sau đó, bạn thêm một listthuộc tính đến input, với một giá trị của idcủa datalist.

Cập nhật: Kể từ tháng 3 năm 2019, tất cả các trình duyệt chính (hiện bao gồm Safari 12.1 và iOS Safari 12.3) đều hỗ trợ datalistở mức cần thiết cho chức năng này. Xem caniuse để biết hỗ trợ trình duyệt chi tiết.

Nó trông như thế này:

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

Mở rộng đoạn mã

Question 3

JSFiddle mới nhất của Alen Saqe đã không bật tắt cho tôi trên Firefox, vì vậy tôi nghĩ rằng tôi sẽ cung cấp một giải pháp html / javascript đơn giản sẽ hoạt động tốt trong các biểu mẫu (liên quan đến việc gửi) cho đến ngày thẻ datalist được tất cả các trình duyệt / thiết bị chấp nhận. Để biết thêm chi tiết và xem nó hoạt động, hãy truy cập: http://jsfiddle.net/6nq7w/4/ Lưu ý: Không cho phép bất kỳ khoảng cách nào giữa các anh chị em đang chuyển đổi!

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

Question 4

Giải pháp jQuery!

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

Demo khác bên dưới (cập nhật!)

Tôi cần một cái gì đó tương tự trong trường hợp khi tôi có một số Tùy chọn cố định và tôi muốn một tùy chọn khác có thể chỉnh sửa được! Trong trường hợp này, tôi đã tạo một đầu vào ẩn sẽ chồng lên tùy chọn đã chọn và có thể chỉnh sửa và sử dụng jQuery để làm cho tất cả hoạt động liền mạch.

Tôi đang chia sẻ khó khăn với tất cả các bạn!

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

Chỉnh sửa: Đã thêm một số thiết kế chạm đơn giản, để mọi người có thể thấy rõ ràng đầu vào kết thúc ở đâu!

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

Question 5

Bạn không thể thực sự. Bạn sẽ phải có cả menu thả xuống và hộp văn bản, và yêu cầu họ chọn hoặc điền vào biểu mẫu. Nếu không có javascript, bạn có thể tạo một bộ nút radio riêng biệt nơi họ chọn menu thả xuống hoặc nhập văn bản, nhưng điều này có vẻ lộn xộn với tôi. Với một số javascript, bạn có thể chuyển đổi vô hiệu hóa cái này hay cái kia tùy thuộc vào việc họ chọn cái nào, ví dụ: có một tùy chọn 'khác' trong trình đơn thả xuống kích hoạt trường văn bản.

Question 6

Nếu tùy chọn danh sách dữ liệu không đáp ứng yêu cầu của bạn, hãy xem thư viện Select2 và " Tạo tùy chọn động "

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

Mở rộng đoạn mã

Question 7

Sử dụng một trong các giải pháp trên (@mickmackusa), tôi đã tạo một nguyên mẫu hoạt động trong React 16.8+ bằng Hooks.

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

Tôi hi vọng nó giúp ích cho ai đó.