Tôi đang cố gắng tạo danh sách thả xuống có chứa trình giữ chỗ. Nó dường như không hỗ trợ placeholder="stuff"như các hình thức khác. Có cách nào khác để lấy trình giữ chỗ trong menu thả xuống của tôi không?

Có chỉ là "đã chọn bị vô hiệu hóa" trong tùy chọn.

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Liên kết đến fiddle

Bạn cũng có thể xem câu trả lời tại

https://stackoverflow.com/a/5859221/1225125

Sử dụng ẩn:

<select>
    <option hidden >Display but don't show in list</option>
    <option> text 1 </option>
    <option> text 2 </option>
    <option> text 3 </option>
</select>

trình đơn thả xuống hoặc lựa chọn không có trình giữ chỗ vì HTML không hỗ trợ nó nhưng có thể tạo ra hiệu ứng tương tự để nó trông giống với các trình giữ chỗ đầu vào khác

    $('select').change(function() {
     if ($(this).children('option:first-child').is(':selected')) {
       $(this).addClass('placeholder');
     } else {
      $(this).removeClass('placeholder');
     }
    });

.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control placeholder">
   <option value="">Your Placeholder Text</option>
   <option value="1">Text 1</option>
   <option value="2">Text 2</option>
   <option value="3">Text 3</option>
</select>

nếu bạn muốn xem tùy chọn đầu tiên trong danh sách, hãy xóa thuộc tính hiển thị khỏi css

Nếu bạn đang khởi tạo trường chọn thông qua javascript, có thể thêm phần sau để thay thế văn bản trình giữ chỗ mặc định

noneSelectedText: 'Insert Placeholder text'

ví dụ: nếu bạn có:

<select class='picker'></select>

trong javascript của bạn, bạn khởi tạo trình chọn như thế này

$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});  

Hầu hết các tùy chọn đều có vấn đề đối với nhiều lựa chọn. Thuộc tính Place Title và đặt tùy chọn đầu tiên là data-hidden = "true"

<select class="selectpicker" title="Some placeholder text...">
    <option data-hidden="true"></option>
    <option>First</option>
    <option>Second</option>
</select>

Thêm thuộc tính ẩn:

<select>
    <option value="" selected disabled hidden>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Thử cái này:

<select class="form-control" required>
<option value="" selected hidden>Select...</option>

khi sử dụng required+ value=""thì người dùng không thể chọn nó bằng cách sử dụng hiddensẽ làm cho nó bị ẩn khỏi danh sách tùy chọn, khi người dùng mở hộp tùy chọn

Hãy thử @title = "thứ". Nó đã làm việc cho tôi.

Tất cả các tùy chọn này là .... ngẫu hứng. Bootstrap đã cung cấp một giải pháp cho việc này. Nếu bạn muốn thay đổi trình giữ chỗ cho tất cả các phần tử thả xuống, bạn có thể thay đổi giá trị của

noneSelectedText trong tệp bootstrap.

Để thay đổi cá nhân, bạn có thể sử dụng thông số TITLE.

thí dụ:

<div class="form-group">
          <label class="control-label col-xs-2" id="country">Continent:</label>
          <div class="col-xs-9">
            <select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple >
              <option value="Africa">Africa</option>
              <option value="Asia">Asia</option>
              <option value="North America">America North</option>
              <option value="South America">America South</option>
              <option value="Antarctica">Antarctica</option>
              <option value="Australia">Australia</option>
              <option value="Europe">Europe</option>
            </select>
          </div>
        </div>

1. trong bootstrap-select.jsTìmtitle: null, và loại bỏ nó.
2. thêm title="YOUR TEXT"vào<select> phần tử.
3. Khỏe :)

Thí dụ:

<select title="Please Choose one item">
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Tôi nghĩ, Hộp thả xuống với một lớp và mã JQuery để vô hiệu hóa tùy chọn đầu tiên cho người dùng chọn, sẽ hoạt động hoàn hảo dưới dạng trình giữ chỗ Hộp Chọn .

<select class="selectboxclass">
   <option value="">- Please Select -</option>
   <option value="IN">India</option>
   <option value="US">America</option>
</select>

Làm cho tùy chọn đầu tiên bị vô hiệu hóa bởi JQuery.

<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>

Điều này sẽ làm cho tùy chọn đầu tiên của Dropdown là Trình giữ chỗ và người dùng sẽ không thể chọn tùy chọn đầu tiên nữa.

Hy vọng nó giúp!!

Đây là một cách khác để làm điều đó

<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required>
    <option value="">Choose Platform</option>
<option value="iOS">iOS</option>
    <option value="Android">Android</option>
    <option value="Windows">Windows</option>
</select>

"Chọn Nền tảng" trở thành trình giữ chỗ và thuộc tính 'bắt buộc' đảm bảo rằng người dùng phải chọn một trong các tùy chọn.

Rất hữu ích, khi bạn không muốn sử dụng tên trường hoặc Nhãn.

Sử dụng Bootstrap, Đây là những gì bạn có thể làm. Sử dụng lớp "text-hide", tùy chọn đã tắt sẽ được hiển thị lúc đầu nhưng không có trong danh sách.

<select class="form-control" >
  <option selected disabled class="text-hide">Title</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Bootstrap select có một noneSelectedTexttùy chọn. Bạn có thể đặt nó thông qua data-none-selected-textthuộc tính. Tài liệu .

Đối với .htmltrang

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

cho .jsphoặc bất kỳ trang servlet nào khác.

<select>
    <option value="" selected="true" disabled="true">Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Bằng cách sử dụng bootstrap, nếu bạn cũng cần thêm một số giá trị vào tùy chọn để sử dụng cho bộ lọc hoặc những thứ khác, bạn có thể chỉ cần thêm lớp "bs-title-option" vào tùy chọn mà bạn muốn làm trình giữ chỗ:

<select class="form-group">
   <option class="bs-title-option" value="myVal">My PlaceHolder</option>
   <option>A</option>
   <option>B</option>
   <option>c</option>
</select>

Bootstrap thêm lớp này vào titlethuộc tính.

Giải pháp cho Angular 2

Tạo một nhãn ở đầu lựa chọn

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

và áp dụng CSS để đặt nó lên đầu

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none cho phép bạn hiển thị lựa chọn khi bạn nhấp vào nhãn, tùy chọn này sẽ bị ẩn khi bạn chọn một tùy chọn.

góc cạnh html css

<option value="" defaultValue disabled> Something </option>

bạn có thể thay thế defaultValuebằng selectednhưng điều đó sẽ đưa ra cảnh báo.